停止使用CSS调整父级div的大小

Question

停止使用CSS调整父级div的大小

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.post的大小。我该如何使div.post-info适应div.parent的宽度，并在其宽度较大时不调整父级div.post的大小。

我的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更宽。

- Yusaf Khaliq

只是一个问题：您不想增加高度，而是想实现类似于元素具有 overflow:hidden; 的效果，对吗？您应该告诉我们您想要实现什么，以及不想要的。 - Roko C. Buljan

6个回答

1

通过以下 CSS 更改，似乎可以解决问题：

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

JS Fiddle演示。

原因：

display: block; 允许为元素分配 width（因此也可以使用 max-width）。
max-width: 90%; 确保元素的最大宽度小于父元素的宽度，从而在元素内容和父元素边框之间留出一些空间。
margin: 0 auto; 在其父元素内水平居中该元素。

- David Thomas

图片之间有很多空白可能不太好，它们必须在所有地方都是同一尺寸。 - Green

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。

- Rob Lowe

0

你可以将 div 的类名为 .post 的宽度设置为 100%，并将类名为 .post-info 的宽度也设置为 100%：

#Blog1 .post {
  width: 100%;
}

.post-info {
  width: 100%;
}

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

- soberga

0

我和楼主遇到了同样的问题，对我来说解决方案是设置

box-sizing: border-box;

我无法在fiddle中重现这种行为，但是将上述内容添加到内部元素中解决了我的应用程序问题，希望能对某些人有所帮助。

- user2728841

-1

尝试使用CSS属性max-width

- Steve Binder

我知道，但如果我设置了max-width属性，当父级div的内容更宽时，文本的宽度将不会与其内容相同。 - Yusaf Khaliq

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

这里有一个演示，但你应该解释清楚： 你想让高度是可变的吗？

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

顺便说一句，这个问题让我想起了我以前的一个回答 :)
如何像Google图片一样展示弹出图片
如果需要帮助，我在这里。