我怎样才能在一条线上证明这三个div，一个在左边，一个在中间，一个在右边？

Question

我想在一行上显示三个元素：一个在左边对齐;中心的第二个并包含子元素;第三个是合适的，包含DuckDuckGo搜索框和放大镜图像。目前我已将它们全部放在同一条线上，但它们并不合理。我的代码如下：

#row2 { padding: 5px 0 5px 10px;
margin: 35px 0 20px 0;
font-size: 83%;
width: 100%;
border-top: 2px #f00 solid;
border-bottom: 1px #888 solid; }

#row2 a {border: none; }

#row2-col1 {display:inline;
text-align:left;
margin-right: 40px;}

#row2-col2 {display:inline;
text-align:center; }

.row2-col2-inner {display:inline;
text-align:center;
margin: 0 15px;  }

#row2-col3 {display:inline;
text-align:right; }

form {
display: inline-block;
vertical-align: middle; }

form input[type="text"] {
height: 16px;
width: 200px;
margin-left: 25px;
margin-top: 2px;
font-size: 13px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #000;
vertical-align: top; }

<div id="row2">
<div id="row2-col1">
text</div><!--close r2-c1-->
<div id="row2-col2">
<div class="row2-col2-inner"><a href="#3">One</a></div>
<div class="row2-col2-inner"><a href="#4">Two</a></div>
<div class="row2-col2-inner"><a href="#5">Three</a></div>
<div class="row2-col2-inner"><a href="#6">Four</a></div>
</div><!--close r2-c2-->
<div id="row2-col3">
<form method="get" id="search" action="http://duckduckgo.com/">
<input type="hidden" name="sites" value="foobar.com"/>
<input type="hidden" name="k8" value="#000000"/>
<input type="hidden" name="k9" value="#0000ff"/>
<input type="hidden" name="kaa" value="#880088"/>
<input type="hidden" name="kt" value="a"/>
    <input type="text" name="q" maxlength="255" placeholder="&nbsp;..."/>             

&nbsp;<img src="images/image.gif" height="20" width="20">
</form>
</div><!--close r2-c3-->
</div><!--close row2-->

Answer 1

有一百种不同的方法可以完成你想要做的事情：

1. 花车（简易）
2. Flexbox（高级）
3. 显示（您正在尝试的外观）
4. 绝对定位（很奇怪，但在某些情况下适用）

......等等......

根据您的示例代码，我会保持简单并使用浮点数。另外，IMO，你应该远离使用ID - 而是使用类。

在下面的示例中，我假设您需要25％-50％-25％。简单的结构是：

<div class="row">
    <div class="column left">Left side</div>
    <div class="column center">Center column</div>
    <div class="column right">Right</div>
</div>

CSS：

/* overflow and zoom are just to clear the row */
http://learnlayout.com/clearfix.html

.row {
    overflow: auto;
    zoom: 1;
}

.row .column {
    float: left;
}

/* set the width of each column */
.column.left, .column.right {
    width: 25%;
}

.column.center {
    width: 50%;
}

注意：

• 这不会考虑填充。如果你想要列之间的间距，那么内部内容处理带有填充或边距。
• 这是您情况的具体示例
• 现在，使用网格框架是很常见的。它们为您提供了更多选项，并且是经过试验和测试的技术，可以处理许多边缘情况。搜索 css grid ，这将帮助您入门。

Answer 2

如果flexbox是一个选项，您可以row2 flexbox 并使用justify-content: space-between根据需要进行对齐 - 请参阅下面的演示：

＆＃13;

＆＃13;

#row2 {
  padding: 5px 0 5px 10px;
  margin: 35px 0 20px 0;
  font-size: 83%;
  width: 100%;
  border-top: 2px #f00 solid;
  border-bottom: 1px #888 solid;
  /*ADDED THESE*/
  display: flex;
  justify-content: space-between;
}

#row2 a {
  border: none;
}

#row2-col1 {
  display: inline;
  text-align: left;
  margin-right: 40px;
}

#row2-col2 {
  display: inline;
  text-align: center;
}

.row2-col2-inner {
  display: inline;
  text-align: center;
  margin: 0 15px;
}

#row2-col3 {
  display: inline;
  text-align: right;
}

form {
  display: inline-block;
  vertical-align: middle;
}

form input[type="text"] {
  height: 16px;
  width: 200px;
  margin-left: 25px;
  margin-top: 2px;
  font-size: 13px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #000;
  vertical-align: top;
}

＆＃13;

<div id="row2">
  <div id="row2-col1">
    text</div>
  <!--close r2-c1-->
  <div id="row2-col2">
    <div class="row2-col2-inner"><a href="#3">One</a>
    </div>
    <div class="row2-col2-inner"><a href="#4">Two</a>
    </div>
    <div class="row2-col2-inner"><a href="#5">Three</a>
    </div>
    <div class="row2-col2-inner"><a href="#6">Four</a>
    </div>
  </div>
  <!--close r2-c2-->
  <div id="row2-col3">
    <form method="get" id="search" action="http://duckduckgo.com/">
      <input type="hidden" name="sites" value="foobar.com" />
      <input type="hidden" name="k8" value="#000000" />
      <input type="hidden" name="k9" value="#0000ff" />
      <input type="hidden" name="kaa" value="#880088" />
      <input type="hidden" name="kt" value="a" />
      <input type="text" name="q" maxlength="255" placeholder="&nbsp;..." />&nbsp;

      <img src="images/image.gif" height="20" width="20">
    </form>
  </div>
  <!--close r2-c3-->
</div>
<!--close row2-->

＆＃13;

＆＃13;

＆＃13;