HTML и CSS: 2 DIVS слева, 1 независимый DIV справа

Я не нашел ответа на этот конкретный случай, поэтому решил задать новый вопрос. Я хочу иметь 2 DIVs в левой части страницы (с фиксированной шириной) и один DIV с правой стороны, занимая остальную часть ширины страницы. Также единственный DIV справа должен иметь свою независимую высоту (когда его высота увеличивается, она не должна влиять на высоту или положение DIVs слева). Что-то вроде этого является то, что я хочу:HTML и CSS: 2 DIVS слева, 1 независимый DIV справа

Divs

Это HTML код:

<body> 
    <div class="div1">Div1</div> 
    <div class="div3">Div3</div> 
    <div class="div2">Div2</div> 
</body>

Это CSS я прямо сейчас:

div.div1 { 
    float: left; 
    height: 400px; 
    margin-right: 10px; 
    width: 200px; 
} 

div.div3 { 
    height: 425px; 
    overflow: hidden; 
} 

div.div2 { 
    clear: left; 
    float: left; 
    height: 15px; 
    margin-top: 10px; 
}

Единственная проблема заключается в что верхняя позиция Div2 зависит от высоты Div3, и я получаю что-то вроде этого: Wrong DIVs

источник

2013-12-03 ali

Я всегда рекомендую использовать "родительский DIV", когда есть 2 дивы в том же столбце "" –

теперь вы можете использовать правильный контент с переполнением: скрытые и не конфликтует с левой стороны дивы.

Проверьте это: http://jsfiddle.net/6UyTr/1/

div.left-content { margin-right: 10px; overflow: hidden; width: 200px; float: left; }

источник

2013-12-03 12:58:18 Tiago

Этот ответ предполагает, что это невозможно без изменения разметки. См. Ниже @Timothy для метода, который работает с исходной разметкой. – chim

Попробуйте

<body> 
    <div class="left"> 
    <div class="div1">Div1</div> 
    <div class="div2">Div2</div> 
    </div> 
    <div class="div3">Div3</div> 

</body>

DEMO

источник

2013-12-03 12:28:07

Попробуйте это:

<html> 
<head> 
<style> 
    div.div1 { 
     float: left; 
     height: 400px; 
     margin-right: 10px; 
     width: 200px; 
     background-color: blue; 
    } 
    div.div2 { 
     clear: left; 
     float: left; 
     height: 15px; 
     width: 200px; 
     margin-top: 10px; 
     background-color: red; 
    }  
    div.div3 { 
     height: 425px; 
     overflow: hidden; 
     background-color: green; 
    } 
</style> 
</head> 
<body> 
    <div class="div1">Div1</div> 
    <div class="div2">Div2</div> 
    <div class="div3">Div3</div> 
</body> 
</html>

После того, как я вновь заказал дивы и добавил ширину для Div 2 она работает отлично

https://jsfiddle.net/6g7qx26b/

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

источник

2013-12-03 12:31:32 Timothy

имо это должно быть принято ответ – chim

это правильный ответ – Seby

<div class="main"> 
    <div class="div1"> 
    <div class="div2"></div> 
    <div class=="div3"></div> 
    </div> 
    <div class="div4"></div> 
    </div>

и в использовании CSS min-height property

.div1 { 
float:left; 
} 
.div4 { 
float:right; 
} 
.main { 
min-height:200px; 
}

источник

2013-12-03 12:31:44

Проверьте это на http://jsfiddle.net/cz2fP/

<div style="float:left;"> 
    <div class="div1">Div1</div> 
    <div class="div2">Div2</div> 
</div> 
<div class="div3">Div3</div>

Группировка левого элемент Div другого сНу элемент.

источник

2013-12-03 12:37:27

div.div1 { 
height: 400px; 
margin-right: 10px; 
width: 200px; 
background: red; 
float: left; 
} 
div.div3 { 
height: 15px; 
margin-top: 10px; 
margin-right: 10px; 
background: green; 
clear: both; 
width: 200px; 

} 
div.div2 { 
    height: 425px; 
overflow: hidden; 
background: blue; 
float: left; 
width: 200px; 
} 

<div style="float:left;"> 
    <div class="div1">Div1</div> 
    <div class="div2">Div2</div> 
</div> 

<div class="div3">Div3</div>

И увидеть ссылку http://jsfiddle.net/bipin_kumar/cz2fP/3/

источник

2013-12-03 12:44:57

<style> 
    div.left{ 
     float: left; 
    } 

    .main{ 
     width : 100%; 
    } 

    .clear{ 
     clear : both; 
    } 

    div.div1, div.div2 { 
     margin-right: 10px; 
     width: 200px; 
     background: red; 
    } 

    div.div1 { 
     height: 400px; 
    } 
</style> 

<body> 
    <div class="main"> 
     <div class="left"> 
      <div class="div1">Div1</div> 
      <div class="div2">Div2</div> 
     </div> 
     <div class="div3">Div3</div> 
     <div class="clear"></div> 
    </div> 
</body>

http://jsfiddle.net/rkpatel/qd6Af/1/

источник

2013-12-12 05:46:32

HTML и CSS: 2 DIVS слева, 1 независимый DIV справа

ответ

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