Разметка трех столбцов в абсолютном расположении div

IMHO следующее типичное 3-столбцовое размещение с использованием CSS. Без окружающего # main-div это выглядит нормально.Разметка трех столбцов в абсолютном расположении div

<html> 
<head> 
    <style type="text/css"> 
     #main { 
      position: absolute; 
      left: 100px; 
      top: 100px; 
      /* width: 400px; */ 
     } 
     .blue { 
      height: 30px; 
      background-color: blue; 
      float:right; 
     } 
     .green { 
      height: 30px; 
      background-color: green; 
     } 
     .red { 
      height: 30px; 
      background-color: red; 
      float: right; 
     } 
    </style>  
</head> 
<body> 
<div id="main"> 
    <div> 
     <div class="blue">RIGHT</div> 
     <div class="red">MIDDLE</div> 
     <div class="green">LEFT</div> 
    </div> 
    <div> 
     <div class="blue">RIGHT</div> 
     <div class="red">MIDDLE ####</div> 
     <div class="green">LEFT</div> 
    </div> 
    <div> 
     <div class="blue">RIGHT</div> 
     <div class="red">############### IN THE MIDDLE</div> 
     <div class="green">LEFT</div> 
    </div> 
</div> 
</body>

Если сделать окно очень мало или добавить # основного Div последний «ЛЕВЫЙ» выпадает из макета. Я могу дать ему достаточную ширину, и он работает снова, но я спрашивал себя, могу ли я сказать браузеру, чтобы ширина среднего столбца определяла ширину # main-div, так что третий LEFT не является выкинутый, и весь div не шире, чем необходимо?

Я не хочу, чтобы вычислить это с JavaScript ... :(

источник

2012-01-23 user414873

** [jsFiddle] (http://jsfiddle.net/u743W/)**. Вы действительно хотели, чтобы это выглядело как лестница? –

Почему вы думаете, что вам нужно абсолютное позиционирование для #main? –

Когда он будет готов, он должен стать выровненным справа меню , который помещается там, где находится указатель мыши. То, что слева и справа, имеет фиксированную ширину й, но я не могу рассказать о тексте пунктов меню посередине, поэтому он будет иметь рваный край (лестничный вид). Всегда трудно получить ширину текста с помощью JavaScript, когда он еще не виден в браузере, поэтому было бы очень приятно, если бы мне не пришлось иметь дело с ним вообще ... – user414873

Попробуйте добавить это к вашей таблице стилей:

.green {float:left;} 
div {height:30px;}

делает эту помощь

источник

2012-01-28 16:26:43

Давая каждой строке высота делает трюк. Благодарю. – user414873

Разметка трех столбцов в абсолютном расположении div

ответ

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