Вопрос по css – прекратить div изменить размер родительского div с помощью css

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 и не менял его, если он больше.

my 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;
}​
Edit

YOU CAN CHANGE THE ELEMENTS AS LONG AS THE CONTENT REMAINS SAME TO CREATE A SOLUTION люди продолжают давать решения, которые не подходят для того, что я спрашиваю ... что мне нужно, чтобы дочерний элемент div .post-info не был больше ширины, чем у родительского элемента div .post

Просто вопрос: вы не хотите увеличивать высоту, но достигаете чего-то, похожего на элементoverflow:hidden; право? Вы должны сказать нам, чего хотите и чего не хотите. Roko C. Buljan

Ваш Ответ

6   ответов
0

max-width

Error: User Rate Limit Exceeded Yusaf Khaliq
0

.post ширина до 100% и.post-info ширина до 100%:

#Blog1 .post {
  width: 100%;
}

.post-info {
  width: 100%;
}

Я верю, что это сделает див.post-info относительно его родительского div.

9

do you want the height to be variable ?

jsFiddle demo

отредактированный 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 Images
Если вам нужна помощь ... я здесь

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded Yusaf Khaliq
Error: User Rate Limit Exceededjsfiddle.net/HmTrw/189 Yusaf Khaliq
Error: User Rate Limit Exceeded Yusaf Khaliq
Error: User Rate Limit Exceeded Yusaf Khaliq
0

что и у ОП, и решение для меня было установить

box-sizing: border-box;

Я не смог бы воспроизвести поведение в скрипке, но просто добавив вышеперечисленное к внутреннему элементу, решил его в моем приложении, поэтому я надеюсь, что это кому-нибудь поможет.

1

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

JS Fiddle demo.

Обоснование:

display: block; allows a width (and therefore max-width) to be assigned to the element. max-width: 90%; to ensure that the element's maximum width is less than the width of the parent, allowing some space between the content of the element and the borders of the parent. margin: 0 auto; horizontally centres the element within its parent.
Error: User Rate Limit Exceeded
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;
}

Похожие вопросы