互いに重なり合っている 2 つの DIV があります。DIVのコンテンツでcontainerDIV の下部を埋めたいとbox-2思います。それ以外の場合は、DIV の長さの下部box-2を使用して拡張することしかでき<br>ません。もちろん、返される結果がさまざまであるため、うまく機能しません。長さ。以下、境界線が薄い DIV ( DIV box-2) は、 DIV の内容に対して塗りつぶされませんcontainer。確実に下部を満たすために、容器はどのように扱われるべきbox-2ですか? containerCSS を とマージする必要がありbox-2ますか?
https://stackoverflow.com/a/16611274/666891に基づく例を次に示しますが、 box-2divは埋められません。
それぞれの HTML コードは次のとおりです。インデントがなくて申し訳ありません。
<div class="box-2">
<div class="border-top">
<div class="border-bot">
<div class="border-left">
<div class="border-right">
<div class="corner-top-left">
<div class="corner-top-right">
<div class="corner-bot-left">
<div class="corner-bot-right">
<div class="box-indent1">
<div id="boxtwo-header">
<div align="center">
<?php
echo "$myrow3[2]";
?>
</div>
</div>
<br><br><br>
<?php
echo '<div class="container">';
$q = mysql_query("SELECT * FROM name WHERE Field4 = '$cat'",$db);
while ($res = mysql_fetch_array($q)){
echo '<div class="item"><p><a href="page.php?page=' . $res['Field2'] . '&' . $res['Field6'] . '">' . $res['Field1'] . '</a></p></div>';
}
echo '</div>';
?>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
box-2CSSは次のとおりです。
.box-2 {
margin: 0 4px 39px 3px;
}
#boxtwo-header {
/* background: url(images/titles-act3.gif) no-repeat 0% 0%; */
position: absolute;
color: #000;
vertical-align: middle;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
height: 26px;
width: 612px;
padding-top: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 1px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #E9E9E9;
border-right-color: #E9E9E9;
border-bottom-color: #E9E9E9;
border-left-color: #E9E9E9;
margin-top: 0px;
margin-right: -5px;
margin-bottom: 0px;
margin-left: -3px;
}
.box-2 .border-top {
background: #fff url(images/border-top2.gif) repeat-x 0% 0%;
}
.box-2 .border-bot {
background: url(images/border-bot2.gif) repeat-x 0% 100%;
}
.box-2 .border-left {
background: url(images/border-left2.gif) repeat-y 0% 0%;
}
.box-2 .border-right {
background: url(images/border-right2.gif) repeat-y 100% 0%;
}
.box-2 .corner-top-left {
background: url(images/corner-top-left2.gif) no-repeat 0% 0%;
}
.box-2 .corner-top-right {
background: url(images/corner-top-right2.gif) no-repeat 100% 0%;
.box-2 .corner-bot-left {
background: url(images/corner-bot-left2.gif) no-repeat 0% 100%;
}
.box-2 .corner-bot-right {
background: url(images/corner-bot-right2.gif) no-repeat 100% 100%;
width: 100%;
}
.box-2 .box-indent {
padding: 4px 33px 32px 37px;
}
.box-2 .box-indent1 {
position: relative;
padding-right: 4px;
padding-bottom: 5px;
padding-left: 5px;
}
.box-2 p {
padding: 0 0 15px 0 !important;
line-height: 1.417em !important;
color: #000000 !important;
}
MySQL クエリのcontainer出力用に 2 列のレイアウトを作成する CSS:
.container {
width: 600px;
float: left;
border-width: 2px;
border-spacing: ;
border-style: outset;
border-collapse: collapse;
}
.container .item {
width: 300px;
float: left;
height: 30px;
padding-top: 2px;
padding-bottom: 2px;
}
.container .item a{
font-family: Arial, Helvetica, sans-serif;
font-size: 10.5pt;
font-style: normal;
font-weight: normal;
text-transform: capitalize;
color: #000000;
text-decoration: none;
}
.container .item a:hover {
color: #FF0000;