html - 2 个 div 以 75% 和 25% 彼此相邻对齐

Question

我需要两个相邻的 div。左侧 div 的宽度为 75%，右侧为 25%。左侧 div 的内容必须左对齐，右侧 div 的内容必须右对齐。

这就是我所做的:

<div class="header_menu">
    <div class="links">
        Home Contact
    </div>
    <div class="social_media">
        Contact twitter linkedin
    </div>
</div>

CSS:

.header_menu{
border-bottom:1px solid #CCC;   
}

.links{
width:75%;
display:inline;
}
.social_media{
width:25%;
display:inline;
}

我尝试添加一个 float:left; 和 float:right; 但是边框不再放在底部了......？ ？

M.

Answer 1

看看这个应该适合你的 jsfiddle:

https://jsfiddle.net/cmkgn4fg/4/

HTML 代码:

<div class="header_menu">
    <div class="links">
        Home Contact
    </div>
    <div class="social_media">
        Contact twitter linkedin
    </div>
    <div class="clearfix"></div>
</div>

CSS 代码:

.header_menu{
    border-bottom:1px solid #CCC;
    width:100%;
}

.links{
    width:75%;
    float:left;
    text-align:left;
}
.social_media{
    width:25%;
    float:left;
    text-align:right;
}
.clearfix{
    clear:both;
}