Bloque en línea sin saltos de línea y con elementos en ancho máximo -- html campo con css camp Relacionados El problema

Inline-block without line break and with elements into max width


1
vote

problema

Español

Estoy probado muchas veces para hacer esto, es muy útil en muchas situaciones, pero no parece posible:

  1. tiene 2 divs en el contenedor DIV, en columnas cortas 2, DIV Ancho de contenedor permanece fijo.
  2. Cada div que aparecen como bloque en línea, por lo que se ajusta a base del contenido interno, por lo que si el contenido interno no es nada, el ancho es cero, si el ancho de 100px será 100px. Este es el bloque normal en línea.
  3. Los 2 DIV deben permanecer siempre en la misma fila, sin línea de interrupción.
  4. Si el contenido de uno o ambos divis, se desbordan, se ocultará y dividirá la estadía siempre en el ancho del contenedor .

soy capaz de hacer 1-2-3 pero me detiene en 4.

Este es el código:

  <div class="container">        <div class="column">Lorem ipsum dolor sit amet</div>                                   <div class="column">Lorem ipsum dolor sit amet</div>                        </div>   

css

  .container{   display: table;   overflow: hidden; } .column {   display: table-cell; }   

Demo

Simplemente se puede hacer por bloque en línea, pero ambas 2 formas tienen el mismo problema: el ancho de DIV con el desbordamiento del contenido interno, no se mantiene en el ancho del contenedor, sino que sigue el ancho de contenido completo

es un poco dificultad para explicar, espero que alguien entienda. Esta es una captura de pantalla de mi proyecto, y mi problema: http://expirebox.com/download/39f9acff53e75830b1714a653b11e0d0.html

Gracias

Original en ingles

Im tried many times to do this, is very usefoul in many situations but seem not possible:

  1. Have 2 divs into same div container, in short 2 columns, div container width stay fixed.
  2. Every div appear like inline-block, so it adjust based to inner content, so if inner content is nothing, width is zero, if inner is 100px width will be 100px. This is the normal inline-block.
  3. The 2 divs must stay always in same row, no break line.
  4. If content of one or both two divs is overflow, it will be hidden and div stay always into the width of container.

Im able to make 1-2-3 but I stop on 4.

This is the code:

<div class="container">        <div class="column">Lorem ipsum dolor sit amet</div>                                   <div class="column">Lorem ipsum dolor sit amet</div>                        </div> 

CSS

.container{   display: table;   overflow: hidden; } .column {   display: table-cell; } 

Demo

Similar thing can be done by inline-block but both 2 ways have same problem: width of div with inner content overflow not stay into container width but stay full content width

Is bit difficoult to explain, hope someone understand. This is a screenshot of my project, and my problem: http://expirebox.com/download/39f9acff53e75830b1714a653b11e0d0.html

Thank you

     
 
 

Lista de respuestas

2
 
vote

Hay 2 cosas que hacer aquí:

  1. SET table-layout A fixed :

      .container {   width: 200px;   display: table;   table-layout: fixed;   overflow: hidden; }   
  2. SET visibility A Ocupado en caso de Desbordamiento :

    :
      var element = document.querySelector('.column'); if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){   // your element have overflow   element.style.visibility = "hidden"; } else{   //your element don't have overflow }   

referido de Aquí , js bin .

 

There are 2 things to do here:

  1. Set table-layout to fixed:

    .container {   width: 200px;   display: table;   table-layout: fixed;   overflow: hidden; } 
  2. Set visibility to hidden in case of overflow:

    var element = document.querySelector('.column'); if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){   // your element have overflow   element.style.visibility = "hidden"; } else{   //your element don't have overflow } 

Referred from here, JS Bin.

 
 
     
     

Relacionados problema

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos