enter image description here

I want to create the first layout, but I don’t know how to create these blocks so that it is as correct as possible. was going to take in a total div. then on line 1 2 diva. Let 1 block be 33% wide for the second 66% on line 2 3 diva, hang the same class on line 3 in the same way as line 1 and line 4 in the same way as 2. float this thing to the left. But it seems to me that this is too curve option, and there is much more successful

    2 answers 2

    For example with float:

    *{ box-sizing: border-box; } html, body { padding: 0; margin: 0; } img { max-width: 100%; width: 100%; height: auto; } .row { overflow: hidden; height: 200px; } .col-13 {float:left; height: 100%; width: 33.3333%; background: lightblue;} .col-23 {float:left; height: 100%; width: 66.66666%;} .img-1 { height: 100%; background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; } .img-2 { height: 100%; background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; } .row p { display: table-cell; height: 200px; vertical-align: middle; text-align: center; } 
     <div class="row"> <div class="col-13"><p>Lorem ipsum dolor sit amet.</p></div> <div class="col-23"> <div class="img-1"></div> </div> </div> <div class="row"> <div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> <div class="col-13"><p>Lorem ipsum dolor sit.</p></div> <div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> </div> <div class="row"> <div class="col-23"> <div class="img-2"></div> </div> <div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> </div>

    With flex:

     *{ box-sizing: border-box; } html, body { padding: 0; margin: 0; } img { max-width: 100%; width: 100%; height: auto; } .row { overflow: hidden; height: 200px; display: flex; flex-flow: row nowrap; align-items: stretch; align-content: stretch; justify-content: space-between; } .col-13 {height: 100%; width: 33.3333%; background: lightblue;} .col-23 {height: 100%; width: 66.66666%;} .img-1 { height: 100%; background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; } .img-2 { height: 100%; background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; } .row p { display: table-cell; height: 200px; vertical-align: middle; text-align: center; } 
     <div class="row"> <div class="col-13"><p>Lorem ipsum dolor sit amet.</p></div> <div class="col-23"> <div class="img-1"></div> </div> </div> <div class="row"> <div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> <div class="col-13"><p>Lorem ipsum dolor sit.</p></div> <div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> </div> <div class="row"> <div class="col-23"> <div class="img-2"></div> </div> <div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> </div>

    From table:

     *{ box-sizing: border-box; } html, body { padding: 0; margin: 0; } img { max-width: 100%; width: 100%; height: auto; } .row { overflow: hidden; height: 200px; display: table; width: 100%; } .col-13 {display: table-cell; vertical-align: middle; height: 100%; width: 33.3333%; background: lightblue;} .col-23 {display: table-cell; vertical-align: middle; height: 100%; width: 66.66666%;} .img-1 { height: 100%; background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; } .img-2 { height: 100%; background: url(http://images.fineartamerica.com/images-medium-large/loose-goose-iv-hot-air-balloon-rally-img-6492-torrey-smith.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; } .row p { display: table-cell; vertical-align: middle; height: 200px; text-align: center; } 
     <div class="row"> <div class="col-13"><p>Lorem ipsum dolor sit amet.</p></div> <div class="col-23"> <div class="img-1"></div> </div> </div> <div class="row"> <div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> <div class="col-13"><p>Lorem ipsum dolor sit.</p></div> <div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div> </div> <div class="row"> <div class="col-23"> <div class="img-2"></div> </div> <div class="col-13"><p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p></div> </div>

      Do you want to write by hand or is it acceptable to use frameworks? If it is permissible - Bootstrap grid system to help. In this grid system, the default page is divided into 12 columns. That is, your 1/3 and 2/3 blocks can be written as:

       <!--РЯД--> <div class="row"> <!--КОЛОНКА ЗАНИМАЮЩАЯ 1/3 СТРАНИЦЫ--> <div class="col-lg-4"> ... </div> <!--КОЛОНКА ЗАНИМАЮЩАЯ 2/3 СТРАНИЦЫ--> <div class="col-lg-8"> ... </div> </div>

      By analogy, we build blocks that occupy 1/3 of a page:

       <!--РЯД--> <div class="row"> <!--КОЛОНКА ЗАНИМАЮЩАЯ 1/3 СТРАНИЦЫ--> <div class="col-lg-4"> ... </div> <!--КОЛОНКА ЗАНИМАЮЩАЯ 1/3 СТРАНИЦЫ--> <div class="col-lg-4"> ... </div> <!--КОЛОНКА ЗАНИМАЮЩАЯ 1/3 СТРАНИЦЫ--> <div class="col-lg-4"> ... </div> </div>
      Personally, my opinion - to use the framework is good. Immediately, issues of basic adaptability are solved and there is a set of useful classes for layout.