如何将 div 放置在另一个 div 下，该 div 具有 float: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 属性，以使用您的红色和黄色示例：

.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 在 fiddle 中损坏了。不过，它在您的 post 中看起来是正确的。您所要做的就是将顶部文本 div 向右浮动并设置 clear: both 以便它在自己的行上浮动。

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

Fiddle here

Answer 3

这是一种使用 clear:right 和您的实际代码的方法。

只需将此 class 添加到您的 CSS

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

DEMO

希望对您有所帮助。

如何将 div 放置在另一个 div 下，该 div 具有 float:right

How to position a div under an other div that has a float:right

html

css

responsive-design