如何将div放在另一个具有float的div下：right

Question

我有一个带有float:right的菜单div（我无法更改，因为它在我的所有WP页面中都是默认值）。

我想在菜单div下添加一个坚持右侧的div。

我做了一些油漆工作向你展示：

• 黑色部分是div。
• 右上角的导航菜单。
• 黄色div是我想去的部分。

我尝试使用absolute定位，但这是一个问题，因为页面必须有响应。

我尝试使用vertically-align，它可以定位div，但是当我给出黄色div width:50%时，它会将菜单推到页面中间，就好像它取代了它一样。

如何将黄色div与文本对齐？

这是我必须建立的：

jsfiddle：http://jsfiddle.net/z933zvev/3/

HTML：

<div class="careers">

    <div class="top">
        <ul> <!-- First Menu -->
            <li> <a href="#"> Clients </a> </li>
            <li> <a href="#"> About Us </a> </li>
            <li> <a href="#"> Contact </a> </li>
            <li class="hasImage"> <a href="#"> <img src="<?php echo $themedir;?>/images/yellow_logo_top_menu_yellow.png" class="logo"> </a> </li>
        </ul> <!-- End First Menu -->

        <div class="top-texts">
            <div><h1 class="text-yellow">texttexttexttexttexttext.</h1></div>
            <div><h2>Together.</h2></div>
            <div>
                <a href="#">
                    <img src="<?php echo $themedir;?>/images/open positions.png" />
                </a>
            </div>
        </div>

        <div class="texts">

        </div>




    </div>

</div> <!-- END main -->

Answer 1

使用CSS clear属性，使用你的红色＆amp;黄色例子：

.red { 
    float:right; color:red; border: solid 5px; padding: 5px; 
}
.yellow { 
    float:right; color:yellow; border: solid 5px; padding: 5px; 
    clear:right; /* use clear property */
}

演示：

http://jsfiddle.net/z933zvev/2/

Answer 2

首先，你的html在你的小提琴中被打破了。它看起来在你的帖子中是正确的。所有你要做的就是将你的顶级文本div向右浮动并设置清晰：两者都浮动在它自己的行上。

.top-texts {
clear: both;
float:right;
}

小提琴 here

Answer 3

这是使用clear:right 和实际代码执行此操作的方法。

只需将此课程添加到CSS

即可

.top-texts{   
    text-align: right;
    clear: right;
    margin-right: 35px;
}

DEMO

希望它有所帮助。