Смути з дивом після плавання залишилися

Я намагаюся розмістити два розділи по горизонталі, але один вміст другого div перевищує висоту першого, я отримую погані результати:

Ось мій HTML-код:

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="mystyle.css"></head>
<body>

<div class="container">
<div class="yellow">sometext</div>
<div class="green">more text here more text here more text here more text here more     text here more text here more text here more text here more text here more text     here </div>
<div class="spacer"></div>
</div>
</body>

і це мій Css:

.yellow {
background-color: yellow;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}

.green{
background-color: #00ff00;
      }

.container {
width: 30%;
}

.spacer {
 clear: both;
}

Результат, який я хочу, це:

enter image description here

але це те, що я отримую:

enter image description here

4
Питання: чому зелений колір div.yellow та жовтий div.green ?
додано Автор Evan Mulawski, джерело

10 Відповіді

Чому б не зробити фоновий контейнер тим же кольором, що і ваш перший розділ, і змінити CSS на:

JSFiddle тут

.yellow {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}

.green{
background-color: yellow;
    overflow: hidden;    <-- added
      }

.container {
width: 30%;
    background-color: #00ff00;  <-- added
}

.spacer {
 clear: both;
}
6
додано
ясно: обидва для мене зробили трюк, щоб уникнути того, як Footer div переплутався з плаваючим: залишилося перед ним
додано Автор Solano, джерело

Чому б не зробити фоновий контейнер тим же кольором, що і ваш перший розділ, і змінити CSS на:

JSFiddle тут

.yellow {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}

.green{
background-color: yellow;
    overflow: hidden;    <-- added
      }

.container {
width: 30%;
    background-color: #00ff00;  <-- added
}

.spacer {
 clear: both;
}
6
додано
ясно: обидва для мене зробили трюк, щоб уникнути того, як Footer div переплутався з плаваючим: залишилося перед ним
додано Автор Solano, джерело

Чому б не зробити фоновий контейнер тим же кольором, що і ваш перший розділ, і змінити CSS на:

JSFiddle тут

.yellow {
background-color: #00ff00;
margin: 2px;
float: left;
width: 100px;
text-align: center;
}

.green{
background-color: yellow;
    overflow: hidden;    <-- added
      }

.container {
width: 30%;
    background-color: #00ff00;  <-- added
}

.spacer {
 clear: both;
}
6
додано
ясно: обидва для мене зробили трюк, щоб уникнути того, як Footer div переплутався з плаваючим: залишилося перед ним
додано Автор Solano, джерело

Незважаючи на те, що плаваюча сторона зазвичай використовується для цілей макета, подібних до цього, вона спочатку була розроблена для текстових елементів float . Це є причиною того, чому плаваючі divs поводяться у дивному способу , коли ті, хто не знайомий з ним.

Крім проблем з форматуванням тексту існує ще одна складність, коли ви хочете, щоб два плаваючі елементи мали однаковий висоту автоматичного . Це можна було б досягти набагато краще, використовуючи властивість display з таблицею і таблицею комірки .

Подивіться на це:

CSS для динамічної макета HTML з невизначеними стовпцями?

Або просто візьміть, що стосується скрипки:

http://jsfiddle.net/TfuTE/

2
додано

Незважаючи на те, що плаваюча сторона зазвичай використовується для цілей макета, подібних до цього, вона спочатку була розроблена для текстових елементів float . Це є причиною того, чому плаваючі divs поводяться у дивному способу , коли ті, хто не знайомий з ним.

Крім проблем з форматуванням тексту існує ще одна складність, коли ви хочете, щоб два плаваючі елементи мали однаковий висоту автоматичного . Це можна було б досягти набагато краще, використовуючи властивість display з таблицею і таблицею комірки .

Подивіться на це:

CSS для динамічної макета HTML з невизначеними стовпцями?

Або просто візьміть, що стосується скрипки:

http://jsfiddle.net/TfuTE/

2
додано

Незважаючи на те, що плаваюча сторона зазвичай використовується для цілей макета, подібних до цього, вона спочатку була розроблена для текстових елементів float . Це є причиною того, чому плаваючі divs поводяться у дивному способу , коли ті, хто не знайомий з ним.

Крім проблем з форматуванням тексту існує ще одна складність, коли ви хочете, щоб два плаваючі елементи мали однаковий висоту автоматичного . Це можна було б досягти набагато краще, використовуючи властивість display з таблицею і таблицею комірки .

Подивіться на це:

CSS для динамічної макета HTML з невизначеними стовпцями?

Або просто візьміть, що стосується скрипки:

http://jsfiddle.net/TfuTE/

2
додано

Я думаю, обмеження .container для певного фонового кольору може бути громіздким. Я рекомендую використовувати display: table для батьківського елемента та display: table cell-cell для дітей, щоб позбутися цієї проблеми.

Просто додайте наступні рядки у свою таблицю стилів:

.container {
  display: table;
  height: 100%;
}

.container > div {
  display: table-cell;
  height: inherit;
  vertical-align: top;
}

Here is a JSBin Demo

1
додано

Я думаю, обмеження .container для певного фонового кольору може бути громіздким. Я рекомендую використовувати display: table для батьківського елемента та display: table cell-cell для дітей, щоб позбутися цієї проблеми.

Просто додайте наступні рядки у свою таблицю стилів:

.container {
  display: table;
  height: 100%;
}

.container > div {
  display: table-cell;
  height: inherit;
  vertical-align: top;
}

Here is a JSBin Demo

1
додано

Я думаю, обмеження .container для певного фонового кольору може бути громіздким. Я рекомендую використовувати display: table для батьківського елемента та display: table cell-cell для дітей, щоб позбутися цієї проблеми.

Просто додайте наступні рядки у свою таблицю стилів:

.container {
  display: table;
  height: 100%;
}

.container > div {
  display: table-cell;
  height: inherit;
  vertical-align: top;
}

Here is a JSBin Demo

1
додано

якщо ви зробите блок-елемент плаваючою, ваш елемент не буде висотою та шириною 100%, але настільки ж великим, як його вміст, або настільки ж великим, як ви встановите його за допомогою css.

ви можете дати йому висоту з CSS

you could give the yellow div a margin-left: 104px

0
додано