Question

我试图在父div中保留2个兄弟div元素。一个在左端，另一个在右端。但第二个div元素是从父div中走出来的。如何在父div中对齐？

HTML：

<div id="mainRect">
    <div id="topRect">
        <div id="logoRect"><img id="logo" src="images\logo.jpg" /></div>
        <div id="searchRect"><input id="searchbox" type="text" name="search"   placeholder="Search Hospital,Clinic,Doctor" /></div>
    </div>
</div>

CSS：

#topRect {
    width:90%;
    height:75px;
    margin:auto;
    background:#ccc2c2;
}

#logoRect {
    float:left;
    margin-left:5%;
    width:100px;
    height:100%;
}

#logo {
    height:100%;
    width:100%;
}

#searchRect {
    float:left;
    width: 30%;
    height: 25%;
    margin-left:65%;
}

#searchbox {
    width:100%;
    height:100%;
}

Answer 1

您不应该使用margin属性来将浮动元素定位到两侧。您可以将一个元素向左浮动，而另一个元素向右浮动。

EXAMPLE HERE

#logoRect {
    float:left;
    /* margin-left:5%; */
    width:100px;
    height:100%;
}

#searchRect {
    float:right;
    width: 30%;
    height: 25%;
    /* margin-left:65%; */
}

此外，如果要在容器的左/右添加空格（#topRect），可以指定左/右填充，如下所示：

#topRect {
   padding: 0 10px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

注意： box-sizing: border-box更改框宽度的计算，以便包含填充和边框。

Answer 2

你正在使用大量保证金

尝试减少保证金，如下所示

<强> FIDDLE

#searchRect {
    float:left;
    width: 30%;
    height: 25%;
    margin-left:40%;
}

或只是float:right并删除保证金

<强> FIDDLE

#searchRect {
    float:right;
    width: 30%;
    height: 25%;
}

Answer 3

在searchRect上，要么删除margin-left属性并将float属性更改为right，要么将margin-left属性设置为小于或等于50％。

Div元素已经过时了

3 个答案: