如果浏览器宽度太小，HTML / CSS两列/一行第二行包装

Question

我正在创建一个显示一系列行的网页。每行有两列。第一列包含一个图像，第二列包含两行（可能稍后会有更多行，但现在我只有两行）。

以下是我所追求的内容的快速草图：

这是我的HTML标记：

<div id="extensions" class="extensions">
    <div class="extensions row">
        <div class="extensions row icon">icon</div>
        <div class="extensions row details">
            <div class="extensions row name">Name: Some Name</div>
            <div class="extensions row desc" style="">Description: Some description blah blah blah.</div>
        </div>
    </div>
</div>

正如您所看到的，根div（扩展）包含所有行。要创建第一列（图标），我将div放在根div的正下方。接下来，我创建另一个div，它是行的父（name和desc）。

这是我的CSS：

.extensions {
    font-family: sans-serif;
    font-size: 95%;
}
.extensions .row  {
    margin: 5px;
    border: 1px solid red;
}
.extensions .row .icon {
    display: inline-block;
    border: 1px solid green;
}
.extensions .row .details {
    display: inline-block;
}
 .extensions .row .details .name {
    border: 1px solid orange;
}     
.extensions .row .details .desc {
    border: 1px solid purple;
}

（注意边框仅用于调试。）

当我的浏览器足够宽时，一切看起来都很好，如下所示：

但是，如果我使浏览器宽度变小，最终第二列会被包裹在图像列下方：

我已经尝试了各种方法来防止这种情况发生无济于事。

有谁能告诉我如何阻止第二列包装？我是否需要创建另一个div来将图像列和详细信息列都放在一个div中？

谢谢。

Answer 1

FIDDLE0

FIDDLE1                 以百分比指定宽度。它会解决你的问题。

.extensions 
{
 font-family: sans-serif;
 font-size: 95%;
 width: 100%;
}
.extensions .row  
{
 margin: 5px;
 border: 1px solid red;
 width: 100%;
}
.extensions .row .icon 
{
 display: inline-block;
 border: 1px solid green;
 width: 10%;
}
.extensions .row .details 
{
 display: inline-block;
 width: 50%;
}
.extensions .row .details .name 
{
  border: 1px solid orange;
  width: 70%;
}      
.extensions .row .details .desc {
 border: 1px solid purple;
 width:70%
 }