2 pictures of equal width inside a block of unknown width

External block unknown width. It has 2 pictures of equal width and height. It is necessary to make so that both pictures occupy the entire effective area in width inside the block, but have an indent of exactly 8px between themselves and from the edges of the parent block. Support for older browsers is not needed.

  • Flexbox can handle it easily - Alexey Ten

3 answers 3

  1. Wrap pictures in 50% wide blocks. Pictures stretch to 100%. We register box-sizing: border-box; so that the width property determines the width of the blocks themselves, not their contents .

  2. Put blocks next to each other using float: left; . To prevent the parent block from collapsing, assign it overflow: hidden; . In this case, the height of the parent is calculated taking into account the descendants floating in it.

  3. We set the blocks and container padding to half the required 8 pixels. In order to avoid indenting from the bottom edge of the pictures, we add the display: block; property display: block; .

Result: https://jsfiddle.net/glebkema/0u4caqud/

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { border: 1px solid #999; margin: 20px auto; overflow: hidden; padding: 4px; width: 80%; } .half { float: left; padding: 4px; width: 50%; } .half > img { display: block; width: 100%; } 
 <div class="container"> <div class="half"><img src="//placehold.it/600x300/c69/f9c/?text=Left" alt=""></div> <div class="half"><img src="//placehold.it/600x300/69f/9cf/?text=Right" alt=""></div> </div>

    Made an option using display: inline-block

     *{ padding: 0; margin: 0; box-sizing: border-box; } .b-unknown-width{ text-align: center; font-size: 0; /* убираем отступы */ } .b-unknown__pict-container{ display: inline-block; vertical-align: top; width: calc(50% - 12px); margin: 0 4px; font-size: 16px; } .b-unknown__pict-container:first-of-type{ margin-left: 8px; } .b-unknown__pict-container:last-of-type{ margin-right: 8px; } .b-unknown__pict{ padding-bottom: 100%; position: relative; } .b-unknown__pict > img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
     <div class="b-unknown-width"> <div class="b-unknown__pict-container"> <div class="b-unknown__pict"> <img src="http://placehold.it/150x150"> </div> </div> <div class="b-unknown__pict-container"> <div class="b-unknown__pict"> <img src="http://placehold.it/150x150"> </div> </div> </div>

      1 demo: http://codepen.io/Geyan/pen/Gqyvzk?editors=110

       *{ margin:0; padding:0; } .image_wrap{ display:table; margin:auto; } .image_wrap p{ display:table-cell; height:120px; border:4px double #eee; } .image_wrap p img{ display:table-cell; width:200px; height:inherit; margin:8px; } 
       <div class="image_wrap"> <p> <img src="http://www.citylaserclinic.com.au/wp-content/uploads/2015/07/city-laser-clinics-banner.jpg" alt="" /> </p> <p> <img src="http://luxfon.com/pic/201207/2560x1600/luxfon.com-13334.jpg" alt="" /> </p> </div>