Css 3列結果頁面

我正在努力與3列CSS項目。它用於搜索結果頁面。有3個塊，一個用於圖像，一個用於文本，最後一個用於價格（以及其他信息）。Css 3列結果頁面

一切正在與中間列不包含太多的文字。但是，一旦我有更多的文本，第2列將佔用全部寬度並導致換行。

查看照片。

下面是代碼：

CSS：

#results { width:100%; } 
#results .item { background-color:#FFFFFF; width:100%; border:1px solid #e9e9e9; float:left;} 
#results .item:hover { background-color:#f2faff; border:1px solid #e7f6ff} 
#results img { padding:10px; float:left} 
#results .info { padding:10px 20px 10px 10px; height:100px; float:left} 
#results .info .title { font-size:18px; font-weight:700; color:#000000;  } 
#results .info .subtitle { font-size:16px; font-weight:200; color:#000000; } 
#results .info .description { font-size:14px; font-weight:200; color:#666; margin-top:8px; } 
#results .price { padding:10px 20px 10px 10px; border-left:1px solid #e9e9e9; height:100px; float:right}

HTML：

<div class="item" itemscope itemtype="http://schema.org/Product"> 
<a href="#" itemprop="url"> 
    <img src="/images/ads/87/1_130x100.jpg" width="130" height="100" itemprop="image" alt=""> 
    <div class="info"> 
     <div class="title" itemprop="name">this is a beautiful title</div> 
     <div class="subtitle" itemprop="description">This a beautiful sub title</div> 
     <div class="description"> 
      Dimensions 400 cm x 800 cm. Coloris blanc. Hauteur : 300 cm. Structure en acier finition poudre polyester.Toile polyethylène (PE) 140 gr/m². 
      4 rideaux. Sardines de fixation au sol incluses. 
      Ferme sur les 4 cotés. 
     </div> 
    </div> 
    <div class="price">200 Dollars</div> 
</a> 
</div>

查看截圖：

感謝您的幫助！

來源

2014-02-27 lio

卸下.info
的float物業把<div class="price">...</div>前HTML標記中的<div class="info">...</div>。

看到這個FIDDLE。

這將保持元素的響應性。

來源

2014-02-27 13:27:09

因爲您的專欄缺少width。你已經做了正確的事情，但是你需要給它們一個寬度，可以是%或px。喜歡的東西

#results img { 
    padding:10px; 
    float:left; 
    width: 100px; /* Added width */ 
} 
#results .info { 
    padding:10px 20px 10px 10px; 
    height:100px; 
    float:left; 
    width: 200px; /* Added width */ 
} 
#results .price { 
    padding:10px 20px 10px 10px; 
    border-left:1px solid #e9e9e9; 
    height:100px; 
    width: 100px; /* Added width */ 
    float:right 
}

如果要定義像素寬度像我這樣做，你需要考慮到任何父div的寬度也應用於任何填充。

來源

2014-02-27 13:18:36 Pattle

嘗試使用

.item a { 
    display: flex; 
    display: ms-flex; 
    display: -webkit-flex; 
}

來源

2014-02-27 13:18:49

您可以將某些寬度增加到類的信息

即。

#results .info { 
padding: 10px 20px 10px 10px; 
height: 100px; 
float: left; 
width: 40%; 
}

來源

2014-02-27 13:21:43 Stifboy

化妝中間的.info塊浮動：none和利潤率左，右圖像用的尺寸和價格的塊：

#results img { 
    width:150px;/*fixed or percent size here*/ 
    padding:10px; 
    float:left;   
} 
#results .price { 
    width:150px;/*fixed or percent size here*/ 
    float:right; 
    padding:10px 20px 10px 10px; border-left:1px solid #e9e9e9; height:100px; 
} 

#results .info { 
    float:none; /*float none!*/ 
    margin-left:160px; /* width of img here*/ 
    margin-right:160px; /* width of price here*/ 
    padding:10px 20px 10px 10px; height:100px; 
}

來源

2014-02-27 13:23:34

Css 3列結果頁面

回答

相關問題