Блог

Главная - Вопросы по программированию - Плавающие элементы: два способа сделать это, какой более правильный?

Плавающие элементы: два способа сделать это, какой более правильный?

#css #css-float

#css #css-float

Вопрос:

Я просто пытаюсь поместить div рядом с другим. Я нашел 2 разных способа. Они представлены здесь, ниже. Но я не знаю, какой из них более правильный..

 <html>
<head>

<style type="text/css">

.jander1{
  width: 100px;
  height: 100px;
  float: left;
  border: 5px solid;
}

</style>

</head>
<body>
  <div class="jander1">jander1</div>
  <div class="jander1">jander1</div>
</body>
</html>
  
 <html>
<head>

<style type="text/css">

.jander1{
  width: 100px;
  height: 100px;
  float: left;
  border: 5px solid;
}

.jander2{
  width: 100px;
  height: 100px;
  margin-left:100px;
  border: 5px solid;
}

</style>

</head>
<body>
<div id="container">
  <div class="jander1">jander1</div>
  <div class="jander2">jander2</div>
</body>
</html>

Javi

Ответ №1:

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

Как сказал krs1, вы, вероятно, захотите использовать какой-либо метод для очистки ваших плавающих элементов. Самый простой способ — создать содержащий элемент (как в вашем втором примере) и применить к нему overflow: hidden или overflow: auto . Это может иметь побочные эффекты (если содержимое из ящиков переполняется), но не усложняет вашу разметку.

 #container { overflow: hidden; }
#container div { width: 100px; height: 100px; float: left; }

Ответ №2:

Прежде всего, подумайте о своем контенте. Разметка вашего контента должна отражать ваш контент; не позволяйте CSS определять атрибуты класса, которые вы используете. Характер этого содержимого также влияет на то, какой CSS вы должны использовать.

Случай 1: Разное содержимое в 2 <div> элементах

Если мы говорим о разном содержимом между двумя <div> элементами, такими как изображение и некоторый текст…

 <div class="profile-picture"><img src="http://www.gravatar.com/avatar/0be84773790974af8d6a1d5d55801736?s=128amp;d=identiconamp;r=PG" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!</div>

… используйте разные классы. Ни то, ни другое не является jander поэтому не включайте атрибуты класса jargon для адаптации вашего CSS. Атрибуты класса являются идентификаторами элементов и должны иметь семантический смысл.

Пример 1.1: Левый <div> имеет фиксированную ширину

Как только вы перейдете к своему CSS, в случае, подобном этому, изображение будет иметь фиксированную ширину, которая, вероятно, не подлежит большим изменениям; таким образом, вы можете использовать технику № 2 из вашего вопроса, чтобы дать второму <div> a margin-left :

 .profile-picture {
    width:80px;
    height:80px;
    float:left;
}
.about-me {
    margin-left:81px;
}

Вот пример JsFiddle.

Случай 1.2: Левый <div> имеет переменную ширину

Но что, если нам нужно, чтобы это изображение иногда было больше, иногда было маленьким? Что, если мы не знаем размер изображения при написании нашего CSS?

 <div class="profile-picture"><img src="http://media03.linkedin.com/mpr/mpr/shrink_80_80/p/1/000/09a/108/11e3bdd.jpg" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!<br />blah<br />blah<br />blah<br />blah<br />blah</div>
<div class="profile-picture"><img src="http://www.gravatar.com/avatar/0be84773790974af8d6a1d5d55801736?s=128amp;d=identiconamp;r=PG" alt="Profile picture for Richard" class="" /></div>
<div class="about-me">My name is Richard and I work as a software developer!<br />blah<br />blah<br />blah<br />blah<br />blah</div>

… одно из этих изображений 128px высокое, а другое 80px высокое.

Затем мы можем float первое <div> while simply targeting the other with an переполнение-x:hidden;`:

 .profile-picture {
    float:left;
}
.about-me {
    overflow-x:hidden;
}

Вот еще один пример JsFiddle.

Случай 2: Похожее содержимое в 2 <div> элементах

Тогда непременно дайте им одинаковые class атрибуты!

 <div>
    <div class="column">Here is content for column 1!</div>
    <div class="column">Here is content for column 2!</div>
</div>

Если предполагается, что они должны вести себя одинаково, используйте для них одинаковые правила и float оба слева. Если они ведут себя не одинаково, вы можете обобщить приведенные выше соображения; знаете ли вы, какой ширины должен быть этот первый <div> элемент? Если да, продолжайте и используйте margin-left . В противном случае используйте overflow-x .

Ответ №3:

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

Однако вы столкнетесь с проблемами, если попытаетесь поместить блочный элемент под плавающими элементами. После второго элемента класса ‘jander’ добавьте это:

 <div style="clear:both"></div>

Комментарии:

1. Просто добавьте overflow: hidden в css для обоих.

2. @theazureshadow удар для ответа и загадочного имени.

Ответ №4:

Поскольку оба div имеют общий стиль, я бы выбрал первый пример. Я бы также добавил clear:both в ваш #container, поскольку он переносит два divs, которые являются плавающими слева.

Поскольку у вас осталось поле только во 2-м div, я бы использовал либо псевдокласс типа #container div:first-child, либо идентификатор / класс для добавления поля.