Question

我想在一个div中有div，他们需要在表格布局中。但我的css或其中有一个错误，因为我的进度条，不知道。我为你制作了截图。 enter image description here

还有第三个，我不知道为什么，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>

Answer 1

以下是我做过的两项更改

<强> 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;
}

你需要这样的东西吗？

example here

Answer 2

更改以下阻止代码

<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 {...} 课程中添加身高属性

Answer 3

以下是您的代码，其中包含一些更改，float:left;添加到.produkt，以及在这些div之后添加clear:both;的BR。

<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>

DIV中的DIV行和列

3 个答案: