在另一个具有float：div的div之后向div添加margin-left

Question

对不起标题，用一句话很难解释。基本上，我有一个div容器有两个div：1个图像是float:left（ed），另一个是文本。这是它的样子：

<div id="container">
    <img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage">
    <div id="second">
        <h2>Genre:</h2>
        <p>First Person Shooter</p>
    </div>
</div>

这是我正在做的事情的小提琴：

http://jsfiddle.net/qMQL5/880/

我想用文本添加填充到div的p部分。如您所见，我将margin-left:50px添加到#second p，但它没有做任何事情。基本上，我想＆＃34;缩进＆＃34;文字＆＃34;第一人称射击游戏＆＃34;但我这样做有困难。有任何想法吗？

Answer 1

#second上的边距必须与图像（100px）+所需的填充一样大。尝试使用margin-left：150px你会看到。

Answer 2

只需使用空格，并为每个元素提供width。您可以将宽度设为px或%。你可以试试这个

#second {
    background-color: green;
    float:left;
    width:80%;
}

Answer 3

非浮动元素实际上占据了帧的整个宽度。

img {
    float: left;
    opacity: .75;
}
div {
    background: aqua;
    padding-left: 50px; /*nothing happens visually*/
}

<img src="http://lorempixel.com/150/150" />
<div>Hello</div>

要解决此问题，您只需在其上设置overflow:auto即可。

img {
    float: left;
    opacity: .75;
}
div {
    background: aqua;
    overflow: auto;
    padding-left: 50px;
}

<img src="http://lorempixel.com/150/150" />
<div>Hello</div>

Answer 4

更新

这是您现在实际代码的结果：

---

<小时/> 所以，你可以看到它正在应用，但你必须知道一些事情：

• img代码是inline element

  

IMG元素在当前文档中嵌入图像   元素定义的位置。 IMG元素没有内容;   它通常由src指定的图像内联替换   属性，例外是左对齐或右对齐图像   是“浮动”脱节。

• 由于您悬浮了img标记，因此它的行为就像inline-block元素一样

  

浮动inline或block级元素会使元素运行起来   比如inline-block元素（来自here）。

因此，有一些解决方案可以解决这个问题：

---

解决方案＃1

（快速修复[正如您在border添加#container所见] - 我建议您阅读下面的其他解决方案）

仅使用现有的HTML标记和CSS :(这将使<h1>和<p> 缩进）

• 通过应用img（可选 - 修复display:block标记下方的差距）使您的img成为块元素
• 从margin-left移除p并将margin-right添加到img

#container {
    border:1px solid red
}

#gameImage {
    width: 100px;
    float: left;
    height: auto;
    display:block; /*new - optional*/
    margin-right:10px /*new*/
   
}
#second {
    background-color: green;
}

<div id="container">
    <img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
    <div id="second">
        <h2>Genre:</h2>
        <p>First Person Shooter</p>
    </div>
</div>

---

解决方案＃2

由于您已经使用float，请使用clearfix

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
#container {
  background-color: green;
  border:1px solid red;
}

#second {
  float:left;
 /* background-color: green; /*choose what block  will have the background*/ }


#gameImage {
  width: 100px;
  float: left;
  height: auto;
}

#second > p {
  padding-left: 10px;
  box-sizing: border-box;

<div id="container" class="clearfix">
  <img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
  <div id="second">
    <h2>Genre:</h2>
    <p>First Person Shooter</p>
  </div>
</div>

<小时/>

解决方案＃3

删除floats并使用display:table/table-cell

#container {
    display:table;
    width:100%;
    background-color:green;
    border:1px solid red;
}
#container > div {
    display:table-cell;
    vertical-align:top;
}
#container > div:first-child, #container > div > img {
    width:100px
}
#container > div > img {
    display:block
}
#container > #second > p {
    padding-left:10px
}

<div id="container">
    <div>
        <img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
    </div>
    <div id="second">
         <h2>Genre:</h2>
        <p>First Person Shooter</p>
    </div>
</div>

---

解决方案＃4

使用inline-block

#container {
  width: 100%;
  background-color: green;
  font-size: 0;/* fix for inline-block elements gaps*/
  border:1px solid red;    
}
#container > div {
  display: inline-block;
  vertical-align: top;
  font-size: 16px /* fix for inline-block elements gaps*/
}
#container > div:first-child,
#container > div > img {
  width: 100px
}
#container > div > img {
  display: block
}
#container > #second > p {
  padding-left: 10px
}

<div id="container">
  <div>
    <img src="http://boxedinfinity.com/wp-content/uploads/2013/12/Halo3.jpg" alt="Game Image" id="gameImage" />
  </div>
  <div id="second">
    <h2>Genre:</h2>
    <p>First Person Shooter</p>
  </div>
</div>

注意：
您可能需要查看有关浮点数的一些文章here和here

Answer 5

我不完全确定你用绿色盒子想要达到的目标，但是如果你只是想保持原样，你需要制作{{1} } element和inline-block元素，以便它尊重浮动<p>元素并且不会只是环绕它。

<img>

http://jsfiddle.net/0za19kcx/