DIV在DIV中的行和列 [英] DIV in DIV in rows and columns

问题描述

我想在一个div中有div，它们需要在表布局中。但我有一个错误在我的CSS或其因为我的进度条，dunno。我让你看看它的截图。

有第三个，我不知道为什么，1和2应该是蓝色...：（

我的css：

$ b b

  #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 =wrapperclass =fixed> 
< div> 
< div id =breadcrumb> 
< ul class =crumbs> 
< li class =first>< div class =activestyle =z-index：9;>< span>< / span>< b& < / 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& 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> 
  

解决方案

Html

 < span class =produkt >< b> W& auml; hlen Sie ein Produkt< / b>< / span> <！ - 改变它span.produkt到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; 
} 
  

你需要这样的东西吗？

这里的例子

i want to have divs in one div and they need to be in a table layout. But i have an error in my css or its because of my progressbar, dunno. I made you an screenshot how it looks.

There is a third one, which i dont know why, the 1 and 2 should be unter the blue ...:(

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

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

解决方案

Here are two changes that i did

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

Do you need something like this?

example here

这篇关于DIV在DIV中的行和列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！