Фон и CSS-флоаты

StackOverflow https://stackoverflow.com/questions/1495952

  •  19-09-2019
  •  | 
  •  

Вопрос

Итак, я использую сетку 960 и обнаружил несколько вещей, которые они не поддерживают.Я подумывал о переходе на Blueprint, но мне придется вернуться к дизайну чуть позже.В любом случае, я упростил свой код, чтобы показать, что я испытываю:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 

Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test CSS</title>
<style type="text/css">
    .frame { width: 960px; margin-left: auto; margin-right: auto; }
    .column { display: inline; float: left; position: relative; margin: 10px 10px 10px 10px; width: 300px; background-color: silver; }
    #bkg { background-color: blue; }
</style>
</head>

<body>
    <div class="frame" id="bkg">
        <div class="column">Column A</div>
        <div class="column">Column B<div><br/><br/><br/><br/></div></div>
        <div class="column">Column C</div>
    </div>
</body>

</html>

Я пытаюсь увидеть, как фон расширяется, чтобы охватить все три столбца.Могу ли я что-нибудь сделать, чтобы расширить фон, чтобы он охватывал все три столбца?

Это было полезно?

Решение

Вы можете сделать плавающий кадр следующим образом:

.frame { width: 960px; margin-left: auto; margin-right: auto;float:left}

и это делает это.Или можно поместить в кадр дополнительный элемент с «четким исправлением».Готовая сетка 960 сделает это за вас с помощью класса «clear»:

(css  .clearfix { clear: both } )
<div class="frame"
   ...
<div class="clearfix" /></div>

Другие советы

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

div.frame {
     overflow:hidden;
}

Вам не нужно полагаться наclearfix, если у вас нет элементов, выходящих за пределы фрейма, а также вам не нужно полагаться на какую-либо постороннюю разметку с помощьюclear:both.

Вам необходимо применить clearfix класс #bkg.

<div class="frame clearfix" id="bkg">

Что вы хотите сделать, так это «очистить поплавок». Есть много вариантов, некоторые простые и довольно сложные.

Самый простой способ — добавить очищающий элемент после последнего столбца, например:

<div class="frame" id="bkg">
  <div class="column">Column A</div>
  <div class="column">Column B<div><br/><br/><br/><br/></div></div>
  <div class="column">Column C</div>
  <div style="clear: both;"></div>
</div>

И это должен работа.

Вот еще несколько способов (некоторые, чистый CSS):

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top