對齊相鄰的圓角盒子

我創建了兩個圓角盒子，我希望彼此相鄰。但第二個盒子直接出現在第一個盒子下面，儘管我使用了浮動：左第一個。任何解決這個問題的方法都會很有幫助。下面是html和css。對齊相鄰的圓角盒子

的HTML：

<html> 
    <head> 
     <title>Homepage</title> 
     <link rel="stylesheet" href="layout.css"/> 
    </head> 

    <body> 

     <div id="containerDiv"> 

        <!-- Box 1 --> 

      <div id="box1" class="boxDiv"> 
       <div class="upperRound"></div> 
       <div class="boxTagLine"> 
         Some Tag Line 
       </div> 
       <div class="boxContent"> 
        Heres some content 
       </div> 
       <div class="lowerRound"></div> 
      </div> 

      <!-- Box 2 --> 

      <div id="box2" class="boxDiv"> 
       <div class="upperRound"></div> 
       <div class="boxTagLine"> 
         Some Tag Line 
       </div> 
       <div class="boxContent"> 
        Heres some content 
       </div> 
       <div class="lowerRound"></div> 
      </div> 

     </div> 


    </body> 
</html>

的CSS：

#containerDiv { 
    width: 1000px; 

} 
.boxDiv { 
    width: 248px; 
} 
.upperRound { 
    background-image: url('rounded_upper.gif'); 
    height: 20px; 
} 

.lowerRound { 
    background-image: url('rounded_lower.gif'); 
    height: 20px; 
} 

.boxContent,.boxTagLine { 
    border-left: 2px solid #B5B5B5; 
    border-right: 2px solid #B5B5B5; 
    padding: 10px; 
    background-color:#F8F8F8; 
    solid #B5B5B5; 

} 

.boxTagLine { 
    color:#0066FF; 
} 

#box1 { 
    float:left; 
}

來源

2009-11-17 JoeRP

你知道'-moz-邊境radius'等這樣的選項在CSS中可以輕鬆修整corrners？他們在最合適的瀏覽器中可用（所以沒有IE支持） https://developer.mozilla.org/En/CSS_Reference/Mozilla_Extensions – 2009-11-17 11:39:55

第二個div必須浮到右側和下一個元素應該清除浮動。我會在一秒鐘內添加更多信息。

我有點不對。你甚至不需要清理div。

看看這個question。

所以 - 你的情況，將它添加到CSS =>

#box2 { 
    float:right; 
} 

#containerDiv { 
    width: 1000px; 
    overflow: hidden; 
}

我沒有嘗試，但它應該工作。

採礦方法會在箱子之間留下空間。所以 - 這可能不是理想的效果。

來源

2009-11-17 09:17:54

你會使用跨度

但要更好，如果你有使用的div：

.boxDiv { 
    width: 248px; 
    display: inline; 
}

來源

2009-11-17 09:20:09

更好的方法，如果這樣的話。 :) – 2009-11-17 09:23:30

浮動兩個框左側：

#box1,#box2 { 
    float:left; 
}

來源

2009-11-17 09:23:36 Paul

你會更好的浮動.boxDiv左側，如下所示：

.boxDiv { 
    width: 248px; 
    float: left; 
}

如果你添加更多的箱子，他們將浮直線距離，否則，你就必須添加特定的類名這樣的話：

#box1, #box2, #box3, #box4 { 
    float:left; 
}

來源

2009-11-17 16:32:36

對齊相鄰的圓角盒子

回答

相關問題