HTML-дизайн рядом с div

Я хочу создать ниже screenShot с html и css. у моего кода есть проблема, и я не могу переместить div как с screenShot.HTML-дизайн рядом с div

enter image description here

HTML:

<html> 
    <head> 
     <title></title> 
     <style> 
      .box1{ 
       border:1px solid; 
       width:200px; 
       height:100px; 
       float:right; 
      } 
      .box2{ 
       border:1px solid; 
       width:200px; 
       height:100px; 
       float:right; 
       clear: right; 
      } 
      .box3{ 
       border:1px solid; 
       width:200px; 
       height:100px; 
       float:right; 
       clear:none; 
      } 
      .box4{ 
       border:1px solid; 
       width:200px; 
       height:100px; 
       float:right; 
      } 
      .box5{ 
       border:1px solid; 
       width:200px; 
       height:100px; 
       float:right; 
       clear: right; 
      } 
     </style> 
    </head> 
    <body> 
     <div class='box1'></div> 
     <div class='box2'></div> 
     <div class='box3'></div> 
     <div class='box4'></div> 
     <div class='box5'></div> 
    </body> 
</html>

источник

2014-01-26 Mahdi.Pishguy

http://jsbin.com/iyOnAPEw/1/ Pasted код на jsbin, чтобы люди могли видеть, что он делает сейчас более легко – Joeytje50

Или может быть, вы может разделить ваш макет на 3 колонки

CSS

.column{float:left} 
.column-middle{float:left;margin:0 5px} 
.box-sml{float:left;width:200px;height:100px;border:1px solid;margin-bottom:5px} 
.box-sml-bottom{float:left;width:200px;height:100px;border:1px solid;clear:left} 
.box-lrg{float:left;width:200px;height:207px;border:1px solid}

HTML

<div class='column'> 
    <div class='box-sml'></div> 
    <div class='box-sml-bottom'></div> 
    </div> 

    <div class="column-middle"> 
    <div class="box-lrg"></div> 
    </div> 

    <div class='column'> 
    <div class='box-sml'></div> 
    <div class='box-sml-bottom'></div> 
    </div>

http://jsbin.com/UqUNUzUS/2

источник

2014-01-26 13:12:30 amaro

Лучше структурировать свой сайт, как боковой панели левый, центральный и боковой панели правом, так и внутри каждой из главных коробок вы можете создать свои меньшие коробки.

Таким образом, у вас есть чистый css и контроль над пространствами между ящиками.

Надеюсь, это может вам помочь.

источник

2014-01-26 12:49:28

CSS:

.box1,.box2,.box3,.box4,.box5{border:1px solid;float:left;} 
.box1,.box3{margin-bottom:5px;} 
.box1{margin-right:5px;} 
.box3,.box4{margin-left:5px;} 
.box1,.box3,.box4,.box5 {  
    width:200px; 
    height:100px; 
    float:left;  
} 
.box2{ 
    width:200px; 
    height:207px; 
    float:left; 
} 
.box5{margin-top:-102px;}

DEMO here.

источник

2014-01-26 12:49:30 Hiral

-1

Вы можете использовать подход, который использует display:table, display:table-row и display:table-cell атрибуты стиля и сделает так же, как <table>, JSFiddle here

источник

2014-01-26 12:53:39 chrki

HTML-дизайн рядом с div

ответ

Смежные вопросы