Evitar que los divs de bloque en línea se envuelvan
JsFiddle demo
Quiero que los divs:
- envuelva su contenido, y
- permanezca en su línea originalmente asociada, esencialmente sin envoltura.
Básicamente, las tablas se apilan una debajo de la otra, cuando no pueden permanecer en la pantalla. Preferiría que se escondieran fuera de la pantalla.
He intentado agregar overflow: hidden; al estilo de diseño principal. No quiero fijar un ancho para cada div. Necesita ajustarse al contenido en.
.layout {
-moz-border-radius: 15px;
border-radius: 15px;
vertical-align: top;
display: inline-block;
}
.layoutbacking {
-moz-border-radius: 15px;
border-radius: 15px;
padding: 5px;
margin: 5px;
background: #CCCCCC;
}<div class="layout" style="background: #222222; width: 100%">
<div>
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
<div class="layout">
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
<br />
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
</div>
</div>
<div>
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div> 58
Author: Andrea Ligios, 2013-01-21
2 answers
Añade white-space: nowrap; a tu declaración de estilo .layout.
Esto hará exactamente lo que necesita: evitar que los divs se envuelvan.
Mira el
JsFiddle demo
O ejecute el siguiente fragmento pantalla completa y redimensiónelo:
.layout {
white-space : nowrap; /* this does the trick */
overflow : hidden; /* this prevents the grey divs from overflowing */
vertical-align : top;
border-radius : 15px;
display : inline-block;
}
.layoutbacking {
border-radius : 15px;
background : #CCCCCC;
padding : 5px;
margin : 5px;
}<div class="layout" style="background: #222222; width: 100%">
<div>
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
<div class="layout">
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
<br />
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
</div>
</div>
<div>
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div>
<div class="layout layoutbacking">
<table>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
<tr>
<td>data 1</td>
<td>data 2</td>
<td>data 3</td>
<td>data 4</td>
</tr>
</table>
</div> 86
Author: Andrea Ligios,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-04 15:08:10
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-04 15:08:10
Esto detendrá el ajuste de texto y lo mantendrá en línea
.leftContent { float: left;}
.rightContent { overflow: hidden;}
0
Author: Dally S,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-05 10:17:38
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-05 10:17:38