gpt4 book ai didi

jquery - 使用响应式文本自动换行保持响应式内联 block 的位置

转载 作者:太空宇宙 更新时间:2023-11-03 23:55:07 26 4
gpt4 key购买 nike

我有两个内联 block (图像然后是内容),我想像这样水平放置:

enter image description here

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

enter image description here

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

enter image description here

我有一些几乎可以工作的 HTML:Example

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

最佳答案

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

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

关于jquery - 使用响应式文本自动换行保持响应式内联 block 的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18948024/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com