6

http://jsfiddle.net/ETkkR/

<div id="Blog1">
    <div class="post">
    <img src="http://dummyimage.com/180x120/000/fff" alt="Image 1" title="This is my first image"/>
        <div class="post-info">
            <span>post title post title post title</span>
        </div>
    </div>
    <div class="post">
    <img src="http://dummyimage.com/175x104/f0f/fff" alt="Image 2" title="The second one is pretty"/>
                <div class="post-info">
            <span>post title post title post title</span>
        </div>
    </div>        
</div>​

div.post-info 在某些情况下（宽度大于 div.post-info 内容的图像）适合 div.post 父级，但有时 div.post-info 的宽度对父级 div 的影响更大。通过调整大小来发布。我怎样才能使 div.post-info 适合 div.parent 的宽度并且如果它更大则不调整它的大小。

我的 CSS

#Blog1{
    padding:10px;
}
#Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.post img{
    height:100px;
}
.post .post-info{
    text-align:left;
}
.post .post-info span{
    word-wrap:break-word;
}​

编辑

只要内容保持不变，您就可以更改元素以创建解决方案 人们不断提供不适合我所要求的解决方案......我需要的是孩子 div .post-info 不是更大比 .post 父 div 的宽度

4

6 回答 6

11

这是一个演示，但您应该真正解释一下：您是否希望高度可变？

jsFiddle 演示

编辑的 CSS（仅更改的元素）：

#Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display:block;         /**/
    float:left;            /**/
    overflow:hidden;       /**/
    padding-bottom:24px;   /**/
}
.post .post-info span{
    position:absolute;     /**/
    word-wrap:break-word;
}

PS：这个问题将我与我的一个旧答案联系起来 :)
像 Google 图片这样的流行图片
如果你需要帮助......我在这里

于 2012-05-21T20:49:01.770 回答
1

它似乎适用于您的 CSS 的以下更改：

.post .post-info span{
    display: block;
    max-width: 90%;
    margin: 0 auto;
}​

JS 小提琴演示。

推理：

  • display: block;允许将 a width（因此max-width）分配给元素。
  • max-width: 90%;确保元素的最大宽度小于父元素的宽度，在元素的内容和父元素的边框之间留出一些空间。
  • margin: 0 auto;在其父元素中水平居中。
于 2012-05-21T20:23:17.677 回答
0 
#Blog1 .post{
    border:1px solid #000000;
    margin:3px;
    text-align:center;
    position: relative;
    display: inline-block;
    *display: inline;
    zoom: 1;
    max-width: 200px;
    overflow-x: hidden;
}

我认为这个解决方案在 IE6 中不起作用。

于 2012-05-21T20:22:49.347 回答
0

您可以将 div.post宽度设置为 100%，.post-info将宽度设置为 100%：

#Blog1 .post {
  width: 100%;
}

.post-info {
  width: 100%;
}

我相信这将使 div.post-info相对于其父 div。

于 2012-05-21T20:24:20.470 回答
0

我遇到了与 OP 相同的问题，我的解决方案是设置

box-sizing: border-box;

我无法在小提琴中重现该行为，但只需将上述内容添加到内部元素即可在我的应用程序中解决它，所以我希望对某人有所帮助。

于 2019-02-04T11:25:55.683 回答
-1

试试css属性max-width

于 2012-05-21T20:19:56.117 回答