CODEWITHSUNDEEP
htmlcss
INT
INT

Reputation: 912

How to insert a line break between two inline-block elements?

I'm trying to figure out how I can introduce a line break between these to div elements in the fiddle here.

The challenge here is that the elements needs to be centered, but also that I need to be able to force a line break. If I use float I can control the line breaking with: 

.article:after {
   content: '\A';
   white-space: pre;
}

But then obviously the elements aren't centered anymore.

Here's a link straight to the fiddle.

EDIT: I updated with a new fiddle to clarify the need for display: inline-block, hover over one of the images to see the overlay positioned over the image.

<div id="posts">
  <div class="article">
    <div class="inner">
      <div class="overlay">
      </div>
      <div class="content photo">
        <img style="max-width: 45vw;" src="http://dummyimage.com/600x400/000/fff">
      </div>   
    </div>
  </div>

  <div class="article">
    <div class="inner">
      <div class="overlay">
      </div>
      <div class="content photo">
        <img style="max-width: 38vw;" src="http://dummyimage.com/600x400/ff0000/fff">
      </div>   
    </div>
  </div>          
</div>



#posts {
    text-align:center;
}

.article {
    margin: 10px;
    position: relative;
    float: none;
    display: inline-block;
    vertical-align: bottom;
}

.article:after {
    content: '\A';
    white-space: pre;
}

.article .inner {
    position: relative;
    width: 100%;
    height: 100%;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.article .overlay {
    height: 101%;
    width: 101%;
    margin: 0 0 -25px;
    position: absolute;
    top: -1px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba(0,0,0,0);
    -webkit-transition: background-color .3s ease-out;
    -moz-transition: background-color .3s ease-out;
    -o-transition: background-color .3s ease-out;
    transition: background-color .3s ease-out;
}

.content {
    position: relative;
}

img {
    max-width: 100%;
}

Upvotes: 3

Views: 4367

Answers (1)

LcSalazar
LcSalazar

Reputation: 16821

Making them block elements instead of inline-block would break the line and keep them centered:

http://fiddle.jshell.net/z94bzm4n/5/

.article {
    margin: 10px;
    position: relative;
    float: none;
    display: block;
    vertical-align: bottom;
}

That happens because the .article divs inherit the text-align: center from the parent div. Since images are inline elements, it causes them to be centered...

EDIT

Another solution, keeping the inline-block property is to increase the gap between the elements (since they're inline) using word-spacing on the parent. Setting it with a viewport unit (e.g. VW) would break the elements perfectly:

http://fiddle.jshell.net/z94bzm4n/7/

#posts {
    text-align: center;
    word-spacing: 100vw;
}

Upvotes: 4

Related Questions