html - Continuous flow of content of multi line div's without line-breaks -
there 3 divs having width 100%, each div contains 3 inner div's having width 50%, such that
<style type="text/css"> .inner{ width: 50%; display: inline-block; } .outer{ width: 100%; } </style> <div class="outer"> <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div> </div> <div class="outer"> <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div> </div> <div class="outer"> <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div> </div>
now question how can have 2 inner elements on each row ie, no line break, right there line break after each 3'rd inner element, such effect become same this,
<div class="outer"> <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div> </div>
i have tried using float , out of ideas, -regards
may want please check.
.inner{ width: 50%; float:left; display: inline-block; } .outer{ width: 100%; }
<div class="outer"> <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div> </div> <div class="outer"> <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div> </div> <div class="outer"> <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div> </div>
Comments
Post a Comment