Question

我的代码非常基本

HTML：

<div class="blog cf">
    <div class="left_article_content">
        <img width="100" height="100" src="http://placehold.it/100x100" alt="test">
    </div>
    <div class="right_article_content">
        <h1>Test Header</h1>
        <p>
            This is a test This is a test This is a test This is a test This is a test This is a test This is a test 
        </p>
    </div>
</div>

CSS：

.cf:after {
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
}

.blog .left_article_content {
    float: left;
}

.blog .right_article_content {
    float: left;
}

jsFiddle Link

正如您所看到的，我的第二个div right_article_content并未浮动到left_article_content的右侧。是什么原因以及如何解决？

Answer 1

你的第二个div试图占据整个宽度，这将它推到第一个div之下。相应地设置第二个div的宽度：

.blog .right_article_content {
    float: right;
    width: 75%;
}

http://jsfiddle.net/93y7ekcz/5/

或者，您可以将所有内容放在一个浮动的div中：

<div class="blog cf">
  <div class="left_article_content">
    <img width="100" height="100" src="http://placehold.it/100x100" alt="test"/>
  </div>
  <h1>Test Header</h1>
  <p>
     This is a test This is a test This is a test This is a test This is a test This is a test This is a test 
  </p>
</div>

http://jsfiddle.net/93y7ekcz/8/

Answer 2

老兄，我的工作正常。也许你的问题是浏览器的大小，使右侧的元素向下移动。它对我来说工作正常：顺便说一句，如果你放宽，它将适用于任何浏览器尺寸。

    .blog .left_article_content {
    float: left;
}

.blog .right_article_content {
    float: left;
}

http://jsfiddle.net/93y7ekcz/3/

这是全宽：http://jsfiddle.net/93y7ekcz/3/embedded/result/

Answer 3

首先，您必须设置DIV的宽度因为他们的父Div 的 100％宽度 这就是为什么第一个DIV的右侧没有所需空间的原因。

.cf{
    width: xxxPX; 
    OR like
    min-width: xxxPX;
    overflow: auto;
}

.blog .left_article_content {
    width: xxxPX;
    float: left;
}

.blog .right_article_content {
    width: xxxPX;
    float: left;
}

我希望这能解决你的问题。有关自动调整高度和＆amp;父DIV的宽度 How to auto adjust DIVs hieght & width

Answer 4

和其他人一样，如果你没有定义div的高度，它将继承其父div的宽度。你应该相应地定义两个div的宽度。

Answer 5

试试这个

.cf:after {
    content: " ";
    display: block; 
    height: 0; 
    clear: both;
}

.blog .left_article_content {
    float: left;
}

.blog .right_article_content {

}

对此http://jsfiddle.net/7upew2aL/

进行编码

不能将第二个div浮动到第一个div的右侧？

5 个答案: