Question

当一个“动态”时，你如何将两个div放在一个容器内？也就是说，当您在其中单击时，content-top-search中的搜索输入会将宽度从226更改为462。

这是我的CSS代码：

.content-top-buttonsearch-holder {
    text-align: center;
    float: left;
    width: 816px;
    margin-left: 15px;
}
.content-top-buttons {
    height: 31px;
    width: 269px;
    float: left;
    margin-right: 16px;
}
.content-top-search {
    height: 31px;
    float: left;
}

这是我的HTML：

<div class="content-top-buttonsearch-holder">
    <div class="content-top-buttons">
        <a id="all_events_button" href="#" title="Click to show all events happening!"></a>
        <a id="all_venues_button" href="#" title="Click to show all venues in our database!"></a>
        <a id="event_finder_button" href="#" title="Click to search for events!"></a>
    </div>
    <div class="content-top-search">
        <input name="venue-search" class="searchbox" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'sort parties by venue name':this.value;" value="sort parties by venue name" />
    </div>
</div>

Answer 1

<div style="border: 1px solid green; margin: 10px;">
    <div style="margin: 10px auto; width: 50%; border: 1px solid red; text-align:right">center 1</div>
    <div style="margin: 10px auto; width: 80%; border: 1px solid magenta; text-align:left;">center 2</div>
</div>

真正的“魔力”是内部div中的margin-left|right: auto。他们也必须有宽度。

编辑
这不适用于浮动

EDIT2
尝试禁用.content-top-search上的浮点数。也许这就是你想要的。

EDIT3
http://jsbin.com/ukuqas/5有另一个解决方案你有一个带有text-align: center的外部容器和一个带有display: inline-block的内部容器。这个内部容器包含按钮和搜索框。禁止所有浮动。

中心在容器内定位两个div（一个是动态宽度）

1 个答案: