Question

我想制作一个圆角的液体盒子。我试过this例子。我对这个例子的问题 - 它延伸到视口的宽度！我尝试从width:100%选择器中移除div.w1，但它没有帮助.. 我希望这个盒子尽可能灵活。它应该只根据div.w4中的内容大小来扩展其宽度和/或高度。

我该怎么做？

Answer 1

它应该只扩展它的宽度和/或高度取决于的大小 div.w4中的内容

您应该将width: 100%替换为float: left或display: inline-block。

其中任何一个都会为您提供所需的“收缩包装”行为。

float: left：http://jsfiddle.net/MvNWV/

display: inline-block：http://jsfiddle.net/MvNWV/1/

除此之外，您是否知道CSS提供原生圆角？

border-radius：http://jsfiddle.net/MvNWV/2/

http://caniuse.com/border-radius - 除了版本低于9的IE之外，它们“无处不在”。

对于这些浏览器，您可以使用CSS3 PIE。

Answer 2

删除宽度：100％并将 display：inline-block 添加到div.w1

请参阅此示例：http://jsfiddle.net/p3mM5/

Answer 3

首先，你正试图以艰难的方式去做。如果你使用CSS3，你的生活会更快乐。：）

“最简单”的方法是使用这个很棒的CSS3生成器：http://css3generator.com，但是你学习编码它更好，老实说，这也很容易：

.myClass {
display:block;
width:90%; /*or whatever width you want, add margin if you want, w/e. */
height:90%; /*same as above */
border-radius:5px /*you can set it to however many pixels you like*/
-moz-border-radius:5px; /*mozilla support*/
-webkit-border-radius:5px; /*webkit browser support*/ 
border:1px solid #000; /*change the border thickness and color as you like*/
}

希望这有帮助。

DC

我怎么做液体div？

3 个答案: