2个div，并排占据100％的空间

我搜索了很多问题并在这里找到了答案，但我无法得到这个东西的工作。2个div，并排占据100％的空间

您可以查看我的HTML和CSS这里：http://jsfiddle.net/PqjqF/2/

HTML

<div id="SearchBox"> 
    <div id="SearchFieldContainer"> 
     <input class="SearchField" type="text" name="search" placeholder="Search..."/> 
    </div> 
    <div id="SearchButtonContainer"> 
     <a href="#" class="SearchButton">Search</a> 
    </div> 
</div>

CSS

#SearchBox { 
    width: *; 
    background-color: #fff; 
    border-top: 1px solid #ffffff; 
    border-bottom: 1px solid #d2d2d2; 
    height: 40px; 
    padding: 14px 8px 8px 8px; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(92%,#f3f3f3)); 
    background: -webkit-linear-gradient(top, #ffffff 0%,#f3f3f3 92%); /* Chrome10+,Safari5.1+ */ 
    background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 92%); /* W3C */ 
} 

#SearchFieldContainer { 
    float: left; 
    width: 100%; 
} 

#SearchButtonContainer{ 
    float:left; 
} 

.SearchField { 
    border: 1px solid #bdbdbd; 
    background: #f5f5f5; 
    -webkit-border-radius: 60px; 
    border-radius: 60px; 
    color: #0a0705; 
    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px; 
    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 1px 1px; 
    padding:8px; 
    margin-bottom:20px; 
    width:100%; 
} 

.SearchField:focus { 
    background: #fff; 
    color: #000000; 
} 

.SearchButton { 
    -webkit-box-shadow: 0px 2px 2px 0px #8a8a8a; 
    box-shadow: 0px 2px 2px 0px #8a8a8a; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2f3c47), color-stop(1, #0f1011)); 
    background-color:#2f3c47; 
    -webkit-border-radius:42px; 
    border-radius:42px; 
    border:1px solid #0d060d; 
    display:inline-block; 
    color:#ffffff; 
    font-family:arial; 
    font-size:18px; 
    font-weight:bold; 
    padding:5px 18px; 
    text-decoration:none; 
}

我想拥有的是输入字段将采取一切空间，它在同一行上有和搜索按钮在它旁边。

我试着像隐藏溢出和许多其他的东西，但它拒绝工作： -/

任何帮助吗？

谢谢， - 沙伊

来源

2013-03-27 Shai

更改HTML有点让div#SearchButtonContainerdiv#SearchFieldContainer之前出现。
添加margin-right到div#SearchFieldContainer做出足够的空间按钮。删除它的float: left;风格，然后它会默认扩展100％宽度（右边有一些空白）;
添加float: right;到div#SearchButtonContainer。

查看在jsFiddle

来源

2013-03-27 19:37:19

由于修改后的例子！似乎工作（即使它似乎不是最优雅的方式） – Shai 2013-03-27 19:41:59

这是注意到实现这种布局的最佳方法。使用空白空间来弥补附近浮动元素的宽度并不是最佳做法。查看我的答案以获得更多可靠的解 – Michael 2013-03-27 19:47:26

@迈克尔您的解决方案的工作，因为你已经然而指定'80％'，'20％'宽度为'div's，不适合@Shai的要求。通常情况下，搜索按钮不应该在调整'＃SearchBox'的大小时调整大小。 – 2013-03-27 19:54:01

嗯，只是尝试：

#SearchFieldContainer { 
    float: left; 
    width: 50%; 
} 

#SearchButtonContainer{ 
    float:left; 
    width: 50%; 
}

所以二者的div取宽度= 100％的宽度的各50％。还有一些工作需要完美契合，但基本上它应该起作用。记住要“清除”（如果你不知道，请查清楚：两者）。

来源

2013-03-27 19:34:13

你的问题是，某些事情没有达到100％。例如，文本字段本身被设置为100％宽度，但具有使其大于100％的填充。如果将文本字段包装在边框中，则可以看到它延伸超过了包含div的区域。有几种方法可以解决这个问题...要么删除填充，要将填充计算为100％的宽度，要么使用CSS：box-sizing: border-box;告诉浏览器计算宽度，包括填充和边框。

对于您的两个容器也是如此。

我会用box-sizing方法我上面第一次提到...

请参阅下小提琴：http://jsfiddle.net/PqjqF/4/

在这里，我已经添加box-sizing: border-box;到这两个容器，文本字段和按钮。我离开了边界，以便您可以看到容器的边缘。（这是一个伟大的技术，用于调试布局以查看您的盒子的位置）

我已经分别将容器的宽度更改为80％和20％，并将文本字段的宽度设置为100％。您也可以将100％的宽度应用于按钮以使其填充容器。

查看Can I Use It?用于浏览器兼容性的盒子尺寸设置。

现在没有box-sizing: border-box;一个解决方案...

参见下小提琴：http://jsfiddle.net/PqjqF/5/

在此，我已计算出的填充的为百分比，在这种情况下的1％到元件本身的宽度。所以，左右填充1％（顶部和底部无关紧要），98％宽度= 100％。

来源

2013-03-27 19:35:07 Michael

2个div，并排占据100％的空间

回答

相关问题