Помещение двух гибких div друг рядом друг с другом

Я пытаюсь создать веб-страницу, где есть два divs рядом друг с другом, которые являются гибкими. Так что, когда окно браузера сжато вместе, каждый из divs сокращается с шириной браузера (до определенной точки). У меня проблема в том, что с решением ниже, когда окно браузера становится достаточно маленьким, divs не сжимаются, вместо этого линия просто ломается между ними ...Помещение двух гибких div друг рядом друг с другом

Я знаю, что мне не хватает чего-то простого. .. просто не знаю, что это такое:

<html> 
<body> 

<div style="border-style:solid;border-color:green;max-width:100%;overflow: hidden;"> 
    <div style="float:left;border-style:solid;border-color:red;background-color:transparent;padding:15px 30px 0px 30px;min-width:100px;max-width:100%">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
    <div style="overflow: hidden;float:right;border-style:solid;border-color:yellow;min-width:100px;max-width:100%;max-height:100%;">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
</div> 

<body> 
</html>

источник

2012-05-13 rockit

Вы можете использовать CSS display:table-cell свойство для этого. Написать так:

.parent{ 
    display:table; 
    width:100%; 
} 
.parent > div{ 
    display:table-cell; 
    min-width:100px; 
    background:red; 
} 
.parent > .right{ 
    background:green; 
}

Проверьте это: http://jsfiddle.net/Ld3r6/

источник

2012-05-13 11:52:51 sandeep

спасибо, это сработало! display: table on outside, display: table: ячейка слева, и удаление поплавков разрешило проблему – rockit

или это

<style> 
.col  {width: 45%; float:left; border: solid 1px #ccc; margin: 0 10px 0 0;} 
.container {width: 80%; margin: 0 auto; } 
.clear {clear: both} 
</style> 
<body> 

    <div class="container"> 
<div class="col">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
    <div class="col">This is a sample text to fill the space so that it can be looked at in a realistic way.</div> 
    <div class="clear"></div> 
    </div>

источник

2012-05-13 11:58:54 NickP

Помещение двух гибких div друг рядом друг с другом

ответ

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