Как я могу гарантировать, что DIV растягивается, чтобы соответствовать его содержимому? - PullRequest
Новая
       8

Как я могу гарантировать, что DIV растягивается, чтобы соответствовать его содержимому?

15 голосов
/ 21 июля 2009

У меня есть этот HTML с таблицей: 

<div
  class="currentDesignDiv"
  style="margin-bottom:5px;">
  <div>
    <img
      alt="Thumbnail"
      src="http://www.propertyware.com/templates/
        <bean:write name="currentTemplate" property="primaryKey"/>
      /thumb.gif"/>
  </div>
  <div>
    <table>
      <tr>
        <th>Your Current Design: </th>
        <td>Template #: 
          <bean:write name="currentTemplate" property="primaryKey"/>
        </td>
      </tr>
      <tr>
        <th>Last Updated: </th>
        <td>
          <bean:write name="currentTemplate" property="modifiedByAsString"/>
        </td>
      </tr>
      <tr>
        <th>Total Pages: </th>
        <td>
          <bean:write name="numberOfPages"/>
        </td>
      </tr>
    </table>
  </div>

Стиль этого CSS: 

 .currentDesignDiv{
   background-color:#e7e7e7;
   border:1px solid #9c9c9c;
   padding:5px;
   width:100%;
   min-width:860px;
 }
 .currentDesignDiv div{
   float:left;
   width:33%;
 }
 .currentDesignDiv div table{
   font-size:9pt;
   text-align:left;
   margin:17px;
 }
 .currentDesignDiv div:first-child img{
   margin:17px;
   width:80px;
 }

На моем большом мониторе все в порядке, но когда я переключаюсь на маленький, самый правый div, на котором есть изображение, всплывает за пределы родительского div. У кого-нибудь есть решение для этого?

Ответы [ 5 ]

23 голосов
/ 21 июля 2009

комплект 

overflow: auto;

для внешнего div. Это должно расширить ваш родительский div, даже если у его потомков есть свойство float. (IE имеет несколько проблем с этим, но может быть исправлено некоторыми дополнениями)

6 голосов
/ 21 июля 2009

Возможно, попробуйте дать внешнему div этот css ...

дисплей: встроенный блок;

Поскольку плавающие элементы на самом деле не имеют собственной разметки, внешний div просто действует как пустой div, не растягиваясь, чтобы соответствовать элементам внутри него.

Создание внешнего div-блока inline-block по существу заставит внутренние div-ы занимать некоторое реальное пространство во внешнем div-адресе.

3 голосов
/ 22 июля 2009

Я обычно даю:

переполнения: скрытый;

У меня возникла проблема, когда я дал переполнение: авто; иногда внешний div может отображать полосу прокрутки.

1 голос
/ 21 июля 2009

Плавающий родительский div тоже.

Это будет означать, что всплывающие дочерние элементы не будут всплывать из него.

0 голосов
/ 07 ноября 2018

Вот модифицированное решение, которое помогло мне организовать 3 деления с фоном изображения и абсолютным текстом в макете шириной 100%. 

<html>
<head>
<style>
#wrapper {position:relative; float:left; width:100%; height:50px; margin:50px 0 50px 0; background:#000;}
.box-fit {max-width:30%; height:100%; display:inline-block;}
#one {position:absolute; width:100px; height:50px; left:0; background:#2aa2fd;}
#two {position:absolute; width:100px; height:50px; left:50%; transform:translateX(-50%); background:#d4a900;}
#three {position:absolute; width:100px; height:50px; right:0; background:#a7ca48;}
.box-text {position:absolute; width:auto; height:auto; font-size:1em; color:#636363; left:10px; bottom:4px;}
</style>
</head>


<body>
<div id='wrapper'>

<div id='one' class='box-fit'>
<div class='box-text'>
Text for div one!
</div>
</div>

<div id='two' class='box-fit'>
<div class='box-text'>
Text for div two!
</div>
</div>

<div id='three' class='box-fit'>
<div class='box-text'>
Text for div three!
</div>
</div>

</div>
</body>
</html>

https://jsfiddle.net/8zjgtqcm/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...