html - 我如何才能在一条直线上证明这三个div的合理性，一个在左边，一个在中间，一个在右边？

我想在一行上显示三个元素：一个在左边对齐。第二个在中心并包含子元素；第三个是右对齐的，其中包含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-->

最佳答案

有一百种不同的方法可以完成您要完成的工作：


浮点数（容易）
Flexbox（高级）
显示（您正在尝试通过其外观进行尝试）
绝对定位（奇怪，但在某些情况下适用）


... 等等 ...

根据您的示例代码，我将使其保持简单并使用浮点数。另外，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网格，这将使您入门。