css - 行と列のDIVのDIV

Question

1つのdivにdivを入れたいのですが、テーブルレイアウトにする必要があります。しかし、プログレスバー、dunnoが原因で、CSSまたはそのCSSにエラーがあります。私はあなたにそれがどのように見えるかスクリーンショットを作りました。ここに画像の説明を入力してください

3つ目がありますが、理由はわかりませんが、1と2は青である必要があります... :(

私のcss：

#breadcrumb {padding-bottom: 40px;}
.crumbs li {  display: inline; }
.crumbs li div.first { padding-left: 8px; }
.crumbs li div.last { padding-right: 8px; }
.crumbs li div { color: #666; display: block; float: left; font-size: 12px;       margin-left: -13px; padding: 7px 37px 11px 25px; position: relative; text-decoration: none; }

.crumbs li div { background-image: url('images/bg-crumbs.png');  background-repeat: no-repeat; background-position: 100% -96px;}
.crumbs li div.active { color: #333; background-position: 100% 0px; }
.crumbs li.first div span { height: 29px; width: 3px; border-left: 1px solid #d9d9d9; position: absolute; top: 0px; left: 0px; }
.crumbs li.last div.active { background-position: -50px 0px;}
.crumbs li.last div { background-position: -50px -96px;}
.crumbs li.last div span { height: 29px; width: 3px; border-right: 1px solid #d9d9d9; position: absolute; top: 0px; right: 0px; }

div.balken {padding-bottom: 5px;padding-top: 5px;background: #003466; }

span.produkt {padding-left: 20px;color: white;}
#wrapper {
    margin:0px auto;
    background:#FFFFFF;
    padding:0px;
    border: 0px solid #000000;
    width:920px;
}

#produkte {
    background: #FFFFFF;
    border:1px solid #003466;
    margin-left: 25px;
    margin-right: 20px;
    clear:both;
}

.produkt

{
height: 50px;
width: 50px;
border:3px solid #003466;
padding: 20px;
margin: 25px;
display: inline;}

私のHTML

<body>
<div id="wrapper" class="fixed">
<div>
        <div id="breadcrumb">
            <ul class="crumbs">
                <li class="first"><div class="active" style="z-index:9;"><span></span><b>1. </b>Produkt w&auml;hlen</div></li>
                <li><div style="z-index:8;"><b>2.</b> Ihre Handynummer</div></li>
                <li><div style="z-index:7;"><b>3.</b> Bestellung best&auml;tigen</div></li>
                <li><div style="z-index:6;"><b>4.</b> Produkt bezahlen</div></li>
                <li class="last"><div style="z-index:5;"><span></span><b>5.</b> Vielen Dank</div></li>
            </ul>
        </div>
</div>
<div id="produkte" >
<div class="balken"><span class="produkt"><b>W&auml;hlen Sie ein Produkt</b></span></div>
<div class="produkt">1</div>
<div class="produkt">2</div>
<br><br><br>
</div>
</div>
</body>

score 1 · Accepted Answer

これが私がした2つの変更です

HTML

<span class="produkt"><b>W&auml;hlen Sie ein Produkt</b></span> <!-- changed it span.produkt to span.produkt1 --> 
<span class="produkt1"><b>W&auml;hlen Sie ein Produkt</b></span>

Css

.produkt {
height: 50px;
width: 50px; float: left; margin: 10px; // added float and margin 
border:3px solid #003466;
padding: 20px;
}

このようなものが必要ですか？

ここの例

score 0 · Accepted Answer

次のブロックコードを変更する

<div id="produkte" >
<div class="balken"><b>W&auml;hlen Sie ein Produkt</b></div>
<br clear="all" />
<div class="produkt">
<div class="produkt">1</div>
<div class="produkt">2</div>
</div>
<br clear="all" />
</div>

また、必要に応じて、クラス#produkte{...}にheight属性を追加します

score 0 · Accepted Answer

これが、いくつかの変更、追加float:left;、およびそれらのdivの後に.produktあるBRを含むコードです。clear:both;

<style>
#breadcrumb {padding-bottom: 40px;}
.crumbs li {  display: inline; }
.crumbs li div.first { padding-left: 8px; }
.crumbs li div.last { padding-right: 8px; }
.crumbs li div { color: #666; display: block; float: left; font-size: 12px;       margin-left: -13px; padding: 7px 37px 11px 25px; position: relative; text-decoration: none; }

.crumbs li div { background-image: url('images/bg-crumbs.png');  background-repeat: no-repeat; background-position: 100% -96px;}
.crumbs li div.active { color: #333; background-position: 100% 0px; }
.crumbs li.first div span { height: 29px; width: 3px; border-left: 1px solid #d9d9d9; position: absolute; top: 0px; left: 0px; }
.crumbs li.last div.active { background-position: -50px 0px;}
.crumbs li.last div { background-position: -50px -96px;}
.crumbs li.last div span { height: 29px; width: 3px; border-right: 1px solid #d9d9d9; position: absolute; top: 0px; right: 0px; }

div.balken {padding-bottom: 5px;padding-top: 5px;background: #003466; }

#wrapper {
    margin:0px auto;
    background:#FFFFFF;
    padding:0px;
    border: 0px solid #000000;
    width:920px;
}

#produkte {
    background: #FFFFFF;
    border:1px solid #003466;
    margin-left: 25px;
    margin-right: 20px;
    clear:both;
}

.produkt{
height: 50px;
width: 50px;
border:3px solid #003466;
padding: 20px;
margin: 25px;
display: block;
float:left;
}
span.produkt {float:none;padding-left: 20px;color: white;}
</style>
<div id="wrapper" class="fixed">
<div>
        <div id="breadcrumb">
            <ul class="crumbs">
                <li class="first"><div class="active" style="z-index:9;"><span></span><b>1. </b>Produkt w&auml;hlen</div></li>
                <li><div style="z-index:8;"><b>2.</b> Ihre Handynummer</div></li>
                <li><div style="z-index:7;"><b>3.</b> Bestellung best&auml;tigen</div></li>
                <li><div style="z-index:6;"><b>4.</b> Produkt bezahlen</div></li>
                <li class="last"><div style="z-index:5;"><span></span><b>5.</b> Vielen Dank</div></li>
            </ul>
        </div>
</div>
<div id="produkte" >
<div class="balken"><span class="produkt"><b>W&auml;hlen Sie ein Produkt<b></span></div>
<div class="produkt">1</div>
<div class="produkt">2</div>
<br style="clear:both"><br><br>
</div>
</div>

css - 行と列のDIVのDIV

3 に答える 3

Related

Reference