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;，但边框不再位于底部..... ???

微米。

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;
}

Answer 2

你快到了。 inline-block是可以使用的。

由于内联元素有一个空白区域，这将使它们略大于75％/ 25％，因此将它们分成2行，因为它们将超过100％，margin-right: -4px;是解决这个问题的一种方法他们都留在一线。

注意，-4px基于设置字体，可能需要调整，所以这里有更多选项：

How do I remove the space between inline-block elements?

Stack snippet

.header_menu{
  border-bottom:1px solid #CCC;   
}

.links{
  display: inline-block;
  margin-right: -4px;
  width:75%;
  text-align: left;
}
.social_media{
  display: inline-block;
  margin-right: -4px;
  width:25%;
  text-align: right;
}

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

Answer 3

内联元素不会响应宽度和高度样式，这就是您遇到此问题的原因。

请记住，当浮动div时，您需要一个clearfix。您可以阅读有关clearfixes here

的信息

<div class="header_menu clearfix">
    <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%;
    float:left;
}
.social_media{
    width:25%;
    float:right;
}

Answer 4

规则display: inline;忽略高度和宽度，因为元素现在是内联级别元素（因为它应该被视为文本/内容的一部分），但具有显示属性table和{ {1}}您可以实现所需的布局：

table-cell

CSS：

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

这会强制表格式行为到元素上，但也会保留您正在使用的HTML元素的样式选项。

Example on jsFiddle

Answer 5

试试这个：

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

并在您的css文件中：

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


.links{
  width:75%;
  display:inline-block;
 float: left;
 clear: both;
 background-color: red;
}
.social_media{
  width:25%;
  float: right;
  display:inline-block;
  background-color: orange;
 }

颜色bck是为了让您清楚地看到布局！希望这会有所帮助

2个divs彼此相邻，75％和25％

5 个答案: