DIV一起水平擴展的問題
[英]Issue having DIVs expand horizontally together
問題描述
我在使用div創建基本圓角框時遇到問題。 我很確定我錯過了一些小事，但我整天都在工作並且筋疲力盡。 希望有人能發現我的問題並幫助我。
這是一個發生了什么的圖像 - 我希望'標題'和'頁腳也可以擴展。
這是div的代碼..
<div>
<div style="">
<div style="height:44px; width:20px; background-image:url(images/boxes/tl.png); background-repeat:no-repeat; float:left;"></div>
<div style="min-height:34px; min-width:100px; background-image:url(images/boxes/tc.png); background-repeat:repeat-x; float:left; color:#FFFFFF; padding-top:10px;">Search</div>
<div style="height:44px; width:27px; background-image:url(images/boxes/tr.png); background-repeat:no-repeat; float:left;"></div>
<div style="clear:both;"></div>
</div>
<div style="">
<div style="background-image:url(images/boxes/ml.png); min-height:20px; width:20px; background-repeat:repeat-y; float:left;"></div>
<div style="background-color:#3F8FD2; min-width:100px; min-height:20px; float:left;" class="regularText2">Testing Content Expand Here --></div>
<div style="background-image:url(images/boxes/mr.png); min-height:20px; width:27px; background-repeat:repeat-y; float:left;"></div>
<div style="clear:both;"></div>
</div>
<div style="">
<div style="width:20px; height:31px; background-image:url(images/boxes/bl.png); background-repeat:no-repeat; float:left;"></div>
<div style="height:31px; min-width:100px; background-image:url(images/boxes/bc.png); background-repeat:repeat-x; float:left;"></div>
<div style="width:27px; height:31px; background-image:url(images/boxes/br.png); background-repeat:no-repeat; float:left;"></div>
<div style="clear:both;"></div>
</div>
任何/所有幫助非常感謝！ 提前致謝。
迪馬
3 個解決方案
解決方案1
3 2011-04-03 07:57:08
制作圓角的最簡單方法是使用-moz-border-radius和webkit-border-radius ，但這些屬性僅在Mozilla和Webkit瀏覽器上受支持。
然而，我要做的是制作一個具有相對位置的主div，然后將你的角落作為絕對，如下：
<div style="position:relative">
<div style="position:absolute;top:0;left:0;"></div>
<div style="position:absolute;top:0;right:0;"></div>
<div style="position:absolute;bottom:0;left:0;"></div>
<div style="position:absolute;bottom:0;right:0;"></div>
Div content here
</div>
您可以使用背景位置調整高度並添加背景圖像。
此外，我會將CSS放在一個單獨的文件中，我只是為了示例的目的將其放在內聯中。
解決方案2
1 2011-04-03 08:28:05
我最近回答了一個類似的問題，如果你想要一個純CSS方法，答案可能會有所幫助，嵌套而不是浮動可能是答案。
解決方案3
0 2011-04-03 08:04:06
使用jQuery圓角插件。
http://jquery.malsup.com/corner/
它在包括IE在內的所有瀏覽器中都受支持。 它使用嵌套的div（沒有圖像）在IE中繪制角落。 它還支持瀏覽器中的原生邊界半徑舍入（Opera 10.5 +，Firefox，Safari和Chrome）。 因此，在這些瀏覽器中，插件只是設置了一個css屬性。
這是如何使用它
您需要在</body>之前包含jQuery和Corner js腳本。 然后編寫你的jQuery，如$（'div，p'）。corner（'10px'）; 放在''之前。 所以你的HTML看起來像下面的代碼。 這里我正在為所有div和p標簽制作圓角。 如果你想為特定的id或類做，那么你可以做一些像$('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
查看http://jsfiddle.net/VLPpk/1上的工作示例
一起使用for循環和數組時遇到問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.