Geek Answers Handbook

Stop div resizing parent div using css

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

In some cases, div.post-info (images with a width larger than the contents of div.post-info) is suitable for the parent of div.post, however sometimes the width of div.post-info affects the parent div.post more by changing its size. how can I make div.post-info a suitable div.parent width and not resize it if it is larger.

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 ELEMENTS AS LONG AS THE CONTENTS REMAIN TO CREATE A SOLUTION People continue to give solutions that are not suitable for what I ask ... I need the child div.post-info not to be wider than the parent div .post

+6
source share
6 answers

Here is a demo, but you really have to explain: Do you want the height to be variable?

jsFiddle demo

edited CSS (modified elements only):

 #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: this question connects me with my old answer :)
Pop images like Google Images
If you need help ... I'm here

+9
source

It seems to work with the following CSS change:

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

JS Fiddle demo .

Reasoning:

  • display: block; allows you to assign an element width (and therefore max-width ).
  • max-width: 90%; so that the maximum width of the element is less than the width of the parent element, allowing some space between the contents of the element and the borders of the parent element.
  • margin: 0 auto; horizontally centers the element inside its parent.
+1
source

Try the css max-width property

0
source 
 #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; }

This solution, however, will not work in IE6.

0
source

You can set the width of the .post div to 100%, and .post-info to 100%:

 #Blog1 .post { width: 100%; } .post-info { width: 100%; }

I believe this will do the .post-info div relative to its parent div.

0
source

I had the same problem as the OP, and the solution for me was to install

 box-sizing: border-box;

I could not reproduce the behavior in the violin, but just adding the above to the inner element, he solved it in my application, so I hope this helps someone.

0
source

More articles:


All Articles