0

我想在一个 div 中有 div，它们需要在表格布局中。但是我的css有一个错误，或者是因为我的进度条，不知道。我给你截屏了它的样子。在此处输入图像描述

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

3 回答 3

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

你需要这样的东西吗？

这里的例子

于 2012-05-24T10:01:39.350 回答
0

这是您的代码，在这些 div 之后添加了一些更改、添加float:left;到.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>
于 2012-05-24T09:58:14.220 回答
0

更改以下块代码

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

于 2012-05-24T09:53:08.090 回答