Fatal编程技术网
  • css/
  • Css 浮动元素：两种方法，什么更正确？

Css 浮动元素：两种方法，什么更正确？

css

Css 浮动元素：两种方法，什么更正确？,css,css-float,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

我只是想把一个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>


1月1日{
宽度：100px；
高度：100px；
浮动：左；
边框：5px实心；
}
1月1日
1月1日


1月1日{
宽度：100px；
高度：100px；
浮动：左；
边框：5px实心；
}
1月2日{
宽度：100px；
高度：100px；
左边距：100px；
边框：5px实心；
}
1月1日
1月2日
Javi

如果它们起作用，它们就起作用。选项1看起来不错，我以前运行过类似的模式

但是，如果试图将块元素放在浮动元素下面，则会遇到问题。在第二个“jander”类元素之后添加以下内容：

<div style="clear:both"></div>
浮动两者更简单，这意味着如果在前两个元素旁边添加更多元素，则无需小心。“仅浮动一个”更不寻常，在需要实际浮动效果（如浮动元素周围的文本环绕）时更常用

正如krs1所说，您可能需要使用某种方法来清除浮动。最简单的方法是拥有一个包含元素（如第二个示例中所示），并对其应用
overflow:hidden
或
overflow:auto
。这可能会产生副作用（如果框中的内容溢出），但不会使标记复杂化

#container { overflow: hidden; }
#container div { width: 100px; height: 100px; float: left; }
因为两个div都有相同的样式，所以我将使用第一个示例。我还要在您的#容器中添加一个明确的：都是，因为它包装了左侧浮动的两个div

因为您的第二个div中只剩下一个边距，所以我要么使用伪类，如#container div:first child，要么使用id/class来添加边距。

首先，考虑一下您的内容。内容的标记应反映您的内容；不要让CSS决定您使用的类属性。内容的性质也会影响您应该使用的CSS

案例1：2个
元素中的不同内容 如果我们讨论的是两个
元素之间的不同内容，例如图像和一些文本

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

案例1.2：左侧的
具有可变宽度 但是，如果我们需要图像有时更大，有时更小呢？如果我们在编写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>

案例2：2个
元素中的类似内容 然后尽一切办法给他们相同的
class
属性

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


这是第1栏的内容！
下面是第2栏的内容！
如果假设它们的行为相同，则使用相同的规则将它们作为目标，并将它们都放在左侧。如果他们的行为不一致，你可以概括上面的考虑；你知道第一个
应该有多宽吗？如果是这样，请继续使用
左边距
。否则使用
overflow-x

只需将
overflow:hidden
添加到css中即可。@theazureshadow bump表示答案和神秘名称。 
<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>

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

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