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

当一个容器处于“动态”状态时，如何将两个div放置在容器内部？也就是说，content-top-search中的搜索输入在其中单击时将宽度从226更改为462。中心在容器内定位两个div（一个宽度为动态）

这里是我的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>

来源

2011-11-29 pufAmuf

你能给我们你的html吗？我们也需要知道哪些div应该居中。否则这里这是没用的 – Anonymous

我认为你会遇到漂浮物的问题; – HerrSerker

当然，给我第二个 – pufAmuf

<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内部容器containes按钮的内部容器和搜索框。所有浮动都是禁止的。

来源

2011-11-29 14:20:27 HerrSerker

好的，在那种情况下，有一种方法可以设置我的'.searchbox：focus'的css中特定div的宽度。属性？原因是两个div彼此相邻，我不能使用百分数。 – pufAmuf

我上传了一个我有的例子：http://jsbin.com/ukuqas – pufAmuf

@pufAmuf我编辑我的答案 – HerrSerker

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

回答

相关问题