浮动元素：两种方式，更正确的是什么？

时间：2011-04-27 17:05:40

标签： css css-float

我只是想把一个div放在另一个旁边。我发现了两种不同的方式。你在这里有他们。但我不知道它们中哪些更正确.. 

<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>

哈维

4 个答案:

答案 0 :(得分：1)

浮动两者更简单，并且意味着如果在前两个旁边添加更多元素，则不必小心。浮动只是一个更不寻常，更常用于需要实际的浮动效果（如文本环绕浮动元素）。

正如krs1所说，你可能想用一些方法来清除浮子。最简单的方法是使用包含元素（如第二个示例中所示），并将overflow: hidden或overflow: auto应用于它。这可能有副作用（如果框中的内容溢出），但不会使标记复杂化。

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

答案 1 :(得分：1)

首先，考虑一下你的内容。您的内容标记应反映您的内容;不要让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。类属性是element identifiers，应该具有语义意义。

案例1.1：左<div>具有固定宽度

一旦你进入你的CSS，在这样的情况下，图像有一个固定的宽度，可能不会有很多变化;因此，你可以使用问题中的技巧＃2给第二个<div>一个margin-left：

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

Here is a JsFiddle example.

案例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;
}

Here is another JsFiddle example

案例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。

答案 2 :(得分：0)

如果他们有效，他们就会工作。选项1看起来不错，我之前运行过类似的模式。

但是，如果您尝试将块元素放在浮动元素下面，那么您将遇到问题。在第二个“jander”类元素之后添加：

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

答案 3 :(得分：0)

由于两个div共享样式，我会选择第一个例子。我还要添加一个明确的内容：两者都是#container，因为它包含了左边浮动的两个div。

由于你的第二个div只留有一个margin-left，我会使用像#container div这样的伪类：first-child或id / class来添加边距。

相关问题
最新问题