Плавающие элементы: два способа сделать это, что правильнее? - PullRequest
Новая
       1

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

0 голосов
/ 27 апреля 2011

Я просто пытаюсь поставить 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

Ответы [ 4 ]

1 голос
/ 28 апреля 2011

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

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

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

<div class="profile-picture"><img src="http://www.gravatar.com/avatar/0be84773790974af8d6a1d5d55801736?s=128&d=identicon&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, поэтому не включайте атрибуты класса жаргон, чтобы приспособить ваш 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=128&d=identicon&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 overflow-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.

1 голос
/ 27 апреля 2011

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

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

#container { overflow: hidden; }
#container div { width: 100px; height: 100px; float: left; }
0 голосов
/ 28 апреля 2011

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

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

0 голосов
/ 27 апреля 2011

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

Однако вы столкнетесь с проблемами, если попытаетесь поместить элемент блока ниже плавающих элементов.После второго элемента класса 'jander' добавьте это: 

<div style="clear:both"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...