Выпуск столбца div float - PullRequest
Новая
       21

Выпуск столбца div float

0 голосов
/ 31 июля 2010

Я пытаюсь создать макет из двух столбцов. левый столбец содержит список ссылок. Правый столбец содержит основной контент, который состоит из списка абзацев с изображениями. Для каждого элемента абзац должен быть слева от изображения. Элементы разделены горизонтальными линиями. Моя проблема в том, что где бы я ни ставил чистый поплавок, что-то запуталось. Либо абзац + элементы изображения и строки перекрывают друг друга, либо содержимое правого столбца перемещается вниз в соответствии с высотой левого столбца. вот что у меня есть: 

<div id="container">

  <div id="header">
        ...
  </div>
  <div id="subheader">
   ...
  </div>
  <div id="sidebar1">
    (list of links here)
  </div>
  <div id="mainContent">
    <div class="tabcontent hide" id="cont-3-1-1"> 
         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

         <div class="fltlft">
         <div class="title">...</div>
                <div class="subtitle">...</div>
                <div class="text">
                ...
                </div>
         </div>
         <div><img src="image.png" /></div> 
         <br class="clearfloat" />        

         <br /><div class="line"></div><br />

     etc..........

   </div>
   <br class="clearfloat" />
   <div id="footer">
      ...
   </div>
</div>

и CSS: 

.purpleLayout #container { 
 width: 50em; 
 background: #FFFFFF;
 margin: 0 auto;
 border: 0px solid #635e7b;
 text-align: left;
 z-index:0;
 position:relative;
} 

.purpleLayout #sidebar1 {
 float: left; 
 width: 11em;
 background: #c9c5db;
 padding: 1em 0; 
 color:#666666;
}

#sidebar1 .sidetext{
 padding: .4em 1em .2em 1em;
 height:auto;
 width:auto;
}

#sidebar1 .sidelink{
 height:auto;
 width:auto;
 cursor:pointer;
}


.purpleLayout #mainContent {
 margin: 0 1.5em 0 12em;
} 

#mainContent img{
 border: .2em solid #635e7b;
 max-width: 14em;
}

.tabcontent{padding:15px 0;}


.fltrt { 
 float: right;
 margin-left: 8px;
}
.fltlft {
 float: left;
 margin-right: 8px;
 width:21em;
}
.clearfloat {
 clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}


.title{font-size:1.05em; font-weight:bold;}

.subtitle{color:#5f5f5f; font-size:.95em;}

.text{margin-left:1em; font-size:.85em;}

.line{margin-left:.1em; width:36em; border-bottom:1px solid #635e7b

Итак, в этом примере первая горизонтальная линия (та, что после первого абзаца + изображение) сдвигается вниз, так что она ниже высоты левого столбца. Это означает, что между абзацем + изображением и строкой имеется большое пустое пространство. когда я убираю прозрачные плавники, вещи в правом столбце перекрываются.

Есть идеи как это исправить?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 31 июля 2010

Нужно плавать в табконтенте справа, чтобы при его четком поведении не обращал внимания на боковую панель.Я добавил это в ваш CSS: 

.tabcontent{ float: right; }

Возможно, вы также захотите указать явную ширину для этого элемента, если это ваша основная область содержимого.

ПРИМЕЧАНИЕ. Поскольку оба столбца являются плавающимиВы хотели бы иметь элемент clearfloat в конце .mainContent, если после этого что-нибудь появится на странице.

0 голосов
/ 31 июля 2010

По моему опыту, это лучше решить, используя display: inline-block вместо плавающих вещей.Либо так, либо кусай пулю и используй (задыхаясь!) Столы в конце концов.

...