Автоматический перерыв между различными фиксированными размерами div

Моя цель - иметь DIV, который содержит другие DIV с фиксированным размером. Эти DIV должны содержать разрыв строки (только), если это необходимо. Так оно и должно выглядеть следующим образом:Автоматический перерыв между различными фиксированными размерами div

Нет линии ломает необходимо:

_______________________________ 
| ____ ____ ____  | 
| |__| |__| |__|  | 
|        | 
|        | 
|_____________________________|

Line перерыв необходимо:

_______________________________ 
| ____ ____ ____ ____ | 
| |__| |__| |__| |__| | 
| ____      | 
| |__| ...    | 
|_____________________________|

В настоящее время, лучшее, что я мог придумать следующий:

<div id="outer"> 
    <div> 
     <p>Some text</p> 
    </div> 
    ... 
</div> 

<style> 
#outer { 
    overflow: auto; 
} 
#outer div { 
    display: inline; 
    border: 1px solid black; 
} 
#outer div p { 
    width: 60px; 
    height: 60px; 
    Display: inline-block; 
} 
</style>

Есть ли у кого-нибудь идеи о том, как достичь этого?

источник

2015-10-12 Thomas Sparber

вы пробовали с Flexbox? - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

@ThomasSparber работает нормально, так как я добавил несколько кодов css ** http: //jsfiddle.net/44rbrh4r/1/ ** –

Надеюсь, что это поможет вам и разрешить запрос, дайте мне знать, какие вопросы @thomas

#outer { 
 
    overflow: auto; 
 
    border:1px solid #ff0000; 
 
    padding:10px; 
 
} 
 
#outer div { 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
    margin:0px 1% 2% 1%; 
 
} 
 
#outer div p { 
 
    width: 60px; 
 
    height: 60px; 
 
    margin:0px; 
 
    display: inline-block; 
 
}

<div id="outer"> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    ... 
 
</div>

источник

2015-10-12 08:54:47 CreativePS

Попробуйте так: Demo

#outer div { 
    display: inline-block;/Use inline-block */ 
    border: 1px solid black; 
} 
#outer div p { 
    width: 60px; 
    height: 60px; 
}

источник

2015-10-12 08:56:20

здесь ваш код работает отлично я попытался изменить дисплей встроенный блок в DIV, чтобы сделать блок в ряду

#outer { 
 
    overflow: auto; 
 
} 
 
#outer div { 
 
    display: inline-block; 
 
    padding: 5px; 
 
    border: 1px solid #808080; 
 
    text-align: center; 
 
    line-height: 32px; 
 
    margin: 15px; 
 
} 
 
#outer div p { 
 
    width: 60px; 
 
    height: 60px; 
 
}

<div id="outer"> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
    <div> 
 
     <p>Some text</p> 
 
    </div> 
 
</div>

и вот демонстрационная рабочий код для этого

Demo code

источник

2015-10-12 09:17:49

Автоматический перерыв между различными фиксированными размерами div

ответ

Смежные вопросы