javascript - How to make css columns wrap around a cutout -



javascript - How to make css columns wrap around a cutout -

i create layout 1 above. how can create column wrap around image box? need able span across several columns if possible. have tried weeks no avail.

i tried flexbox, , may solution, have yet create work.

is there simple way done?

thank much!

i have suggested using of jquery plugin called jqslickwrap accomplish effect op wanted. if using jquery or javascript not wanted, can seek plain css way.

now op wants paper style page. propose larger container div within number of smaller column divs ( have used 4 example) floated left , styled needed.

now here goes code...

class="snippet-code-css lang-css prettyprint-override">#container{ height:600px; width:80%; background:#cecece; margin:0 auto; } #col1,#col2, #col3, #col4 { height:100%; width:25%; box-sizing:border-box; float:left; padding: 2px 5px; } #col1{ background-color:#ad2340; } #col2{ background-color:#3d2ed4; } #col3{ background-color:#f2234b; } #col4{ background-color:#aa3340; } class="snippet-code-html lang-html prettyprint-override"><div id="container"> <div id="col1"> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p> <img src="http://dummyimage.com/190x120/000/fff.png"/> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum bla.</p> </div> <div id="col2"> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum bla.</p> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p> </div> <div id="col3"> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p><p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum bla.</p> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p> </div> <div id="col4"> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p> <p>lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah lrem ipsum blah blah blah.</p> </div> </div>

hope helps

javascript html css css3

Comments

Post a Comment

Popular posts from this blog

Delphi change the assembly code of a running process -

Delphi change the assembly code of a running process - i'm trying alter address 00741fa5 has push test.009e721c . alter push test.009e71c8 . procedure callback; asm force $9e71c8 end; procedure tform2.btn1click(sender: tobject); var ppid :dword; pprocess : cardinal; begin getwindowthreadprocessid(findwindow(nil,pchar('test')), @ppid); pprocess := openprocess(process_all_access, false, ppid); injectasm(pprocess, $741fa5, 10, integer(@callback), 0); end; here injectasm function (with error checking) function injectasm(process: longword; injectaddress, injectsize, codeaddress, codesize : integer): pointer; var csize, rsize : integer; replaced : array of byte; jmp : array [0..4] of byte; jmpaddress : integer; nopv : byte; : integer; nbr: ulong_ptr; begin //injectsize must equal or greater 5, because need space our //(far) jmp wwxxyyzz instruction //if there's no space, inject in place of few instructions if injectsize &
Read more

java - Parsing XML, skip certain tags -

java - Parsing XML, skip certain tags - i next mkyong's great tutorial on how parse xml in java, have situation need read tags within area. e.g. <?xml version="1.0"?> <company> <staff id="1001"> <firstname>yong</firstname> <lastname>mook kim</lastname> <nickname>mkyong</nickname> <salary>100000</salary> </staff> <staff id="2001"> <firstname>low</firstname> <lastname>yin fong</lastname> <nickname>fong fong</nickname> <salary>200000</salary> </staff> <changes> <staff id="2001"> <firstname>low</firstname> <lastname>yin fong</lastname> <nickname>fong fong</nickname> <old_salary>175000</salary> <ne
Read more

c# - ASP.NET MVC Sequence contains no matching element -

c# - ASP.NET MVC Sequence contains no matching element - i new asp.net mvc. have finished project unusual issue appeared in project. as seek run project error message. an exception of type 'system.invalidoperationexception' occurred in entityframework.dll not handled in user code additional information: sequence contains no matching element in 1 of controller using statement below groups display in dropdownlist. http://localhost....../clients (trying run page) , getting error on line containing code below. viewbag.groupdropdownvalues = new selectlist(db.groups.orderby(m => m.groupid), "groupid", "groupname"); or other controller: viewbag.categorydropdownvalues = new selectlist(db.category.orderby(m => m.categoryid), "categoryid", "categoryname"); this happening in controllers using syntax. i need display dropdownlists values database. working correctly till morning. don't have thought changed ,
Read more