DIV在行和列中的DIV

我想在一个div中有div，并且他们需要在表格布局中。但是由于我的进度条，我的css或者其中有一个错误，不知道。我为你制作了一张截图。 enter image description here DIV在行和列中的DIV

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

来源

2012-05-24 user1010775

您的HTML无效：http://validator.w3.org/。修复它，问题可能会解决它自己。 – thirtydot

修正了HTML，没有错误，也没有错误的CSS是好的。它仍然是同样的结果！ – user1010775

你能更具体吗？ – agriboz

这里是我做

的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

来源

2012-05-24 10:01:39 agriboz

U是我的英雄，完美，非常非常感谢你！ – user1010775

更改以下分组码

<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-24 09:53:08 pinaldesai

其蓝色栏和我的箱子之间仍然没有空格:( – user1010775

add margin-bottom：20px; to class called div.balken {...} – pinaldesai

下面是一些改变你的代码添加高度属性，添加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>

来源

2012-05-24 09:58:14 CoursesWeb

The Blue Bar现在不见了:( – user1010775

DIV在行和列中的DIV

回答

相关问题