0

我有两个要水平放置的内联块(图像然后是内容),如下所示:

在此处输入图像描述

虽然当容器变小时,图像和内容块不再保持内联。我希望容器不断增加高度来处理内容文本的换行,如下所示:

在此处输入图像描述

如果容器达到限制,元素将移动并居中,但始终尽量不要在两侧创建尽可能少的空白,如下所示:

在此处输入图像描述

我有一些几乎可以使用的 HTML:示例

<div style="margin:20px; height:auto; box-shadow: 2px 2px 1px #999999;   border-style:solid; border-width:1px; border-color:#dddddd; padding:4px; background-color:white; " >
        <div style="width:100%;" >
            <div style="display:inline-block; padding-top:4px; height:100px; width:100px;">
                <img src='http://placekitten.com/100/100'>
            </div>  
            <div style="display:inline-block;  vertical-align:top; padding-top:4px; min-width:70%; max-width:70%;">
                <h2 style=" font-size:12px;">About</h2>
                <p style="font-size:10px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
            </div>
        </div>
</div>
4

2 回答 2

2

只需添加text-align: center到外部块。内部 div 将继承这一点,因此您还应该添加text-align: left到文本块中。

http://jsfiddle.net/tXke7/1/

于 2013-09-22T20:03:29.333 回答
1

看看我的小提琴。我想这就是你所追求的:

http://jsfiddle.net/tXke7/3/

.wrap {
    border: 1px solid #ddd;
    margin: 20px;
    padding: 15px;
}

.wrap img {
    float: left;
    margin-right: 10px;
}

.wrap p {
    margin: 0;
    overflow: hidden;
}

@media(max-width: 500px) {
    .wrap img {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
    }
    .wrap p {
        text-align: center;
    }
}
于 2013-09-22T20:14:02.573 回答