html - Place divs next to each other in a 100% width parent? -


i'm trying create simple text slideshow , need place elements inside parent element next each other 1 child element in display @ time.

the issue have both parent , child elements 100% width , need keep way due design etc.

a working fiddle

and have child elements:

.some {     width:100%;     height:450px;     display: inline-block; }

could please advise on issue?

.some {    width: 100%;    height: 450px;    display: inline-block;  }
<div align="center" style="width:100% white-space:nowrap; height:500px; overflow:hidden;" id="feedtxt">        <div class="some">      <h1>title 1</h1>      <br>      <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.        has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop        publishing software aldus pagemaker including versions of lorem ipsum.</p>    </div>          <div class="some">      <h1>title 1</h1>      <br>      <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.        has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop        publishing software aldus pagemaker including versions of lorem ipsum.</p>    </div>        <div class="some">      <h1>title 1</h1>      <br>      <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.        has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop        publishing software aldus pagemaker including versions of lorem ipsum.</p>    </div>        <div class="some">      <h1>title 1</h1>      <br>      <p>lorem ipsum dummy text of printing , typesetting industry. lorem ipsum has been industry's standard dummy text ever since 1500s, when unknown printer took galley of type , scrambled make type specimen book.        has survived not 5 centuries, leap electronic typesetting, remaining unchanged. popularised in 1960s release of letraset sheets containing lorem ipsum passages, , more desktop        publishing software aldus pagemaker including versions of lorem ipsum.</p>    </div>      </div>

learn css flexbox.

for alignment want, css need:

#feedtxt {     display: flex;     overflow-x: scroll; /* demo */ }  .some {     flex: 0 0 100%;     height: 450px; }

revised fiddle

to learn more flexbox visit:

browser support:

flexbox supported major browsers, except ie 8 & 9. recent browser versions, such safari 8 , ie10, require vendor prefixes. quick way add prefixes, use autoprefixer. more details in this answer.


Comments

Post a Comment