sites - tag div html




Como fazer div não maior que seu conteúdo? (20)

A resposta para sua pergunta está no futuro, meu amigo ...

ou seja, "intrínseco" vem com a atualização mais recente do CSS3

width: intrinsic;

infelizmente IE está por trás com isso por isso não suportá-lo ainda

Mais sobre isso: Módulo de dimensionamento intrínseco e extrínseco de CSS nível 3 e posso usar? : Dimensionamento intrínseco e extrínseco .

Por enquanto você precisa estar satisfeito com <span> ou <div> definido como

display: inline-block;

Eu tenho um layout semelhante a:

<div>
    <table>
    </table>
</div>

Eu gostaria que o div se expandisse apenas até o tamanho da minha table .


A solução é configurar seu div para display: inline-block .


Adulterando o Firebug Encontrei o valor da propriedade -moz-fit-content que faz exatamente o que o OP queria e poderia ser usado da seguinte forma:

width: -moz-fit-content;

Embora funcione apenas no Firefox, não encontrei nenhum equivalente para outros navegadores, como o Chrome.


Basta colocar um estilo no seu arquivo CSS

div { 
    width: fit-content; 
}

Eu resolvi um problema similar (onde eu não queria usar display: inline-block porque o item estava centrado) adicionando uma tag span dentro da tag div , e movendo a formatação CSS da tag div externa para a nova tag interna tag span . Apenas lançando isso como outra idéia alternativa, se display: inline block não é uma resposta adequada para você.


Eu tentei div.classname{display:table-cell;} e funcionou!



Minha solução flexbox CSS3 em dois sabores: O de cima se comporta como um span e o de baixo se comporta como um div, ocupando toda a largura com a ajuda de um wrapper. Suas classes são "top", "bottom" e "bottomwrapper" respectivamente.

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}
Is this
<div class="top">
	<table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
    	<table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.


O que funciona para mim é:

display: table;

no div . (Testado no Firefox e Google Chrome ).


Podemos usar qualquer uma das duas formas no elemento div :

display: table;

ou,

display: inline-block; 

Eu prefiro usar display: table; , porque lida com todos os espaços extras por conta própria. Enquanto display: inline-block precisa de algum espaço extra de fixação.


Se você tem linhas de quebra de contêineres, depois de horas procurando por uma boa solução CSS e não encontrando nenhuma, agora eu uso o jQuery:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});
nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>


Tente display: inline-block; . Para que seja compatível com vários navegadores, use o código css abaixo.

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}
<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>


Uma solução compatível com CSS2 é usar:

.my-div
{
    min-width: 100px;
}

Você também pode flutuar seu div o que forçará o menor possível, mas você precisará usar um clearfix se alguma coisa dentro de seu div estiver flutuando:

.my-div
{
    float: left;
}

Você pode fazer isso simplesmente usando display: inline; (ou white-space: nowrap; ).

Espero que você ache isso útil.


Você pode usar inline-block como @ user473598, mas cuidado com os navegadores mais antigos.

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

O Mozilla não suporta in-line-block, mas eles têm -moz-inline-stack que é aproximadamente o mesmo

Alguns cross-browser em torno inline-block atributo de exibição inline-block : https://css-tricks.com/snippets/css/cross-browser-inline-block/

Você pode ver alguns testes com este atributo em: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/


Você quer um elemento de bloco que tenha o que o CSS chama de largura para ajustar e a especificação não fornece uma maneira abençoada de obter tal coisa. Em CSS2, encolher para ajustar não é uma meta, mas significa lidar com uma situação em que o navegador "precisa" obter uma largura do nada. Essas situações são:

  • flutuador
  • elemento absolutamente posicionado
  • elemento de bloco inline
  • elemento de mesa

quando não há largura especificada. Eu ouvi que eles pensam em adicionar o que você quer em CSS3. Por enquanto, faça uma das opções acima.

A decisão de não expor o recurso diretamente pode parecer estranha, mas há uma boa razão. É caro. Diminuir para ajustar significa formatar pelo menos duas vezes: você não pode começar a formatar um elemento até saber sua largura e não pode calcular a largura sem passar pelo conteúdo inteiro. Além disso, não é necessário um elemento de encolhimento para encaixar tão frequentemente quanto se possa pensar. Por que você precisa de div extra ao redor da sua mesa? Talvez a legenda da tabela seja tudo que você precisa.


OK, em muitos casos você nem precisa fazer nada, pois por padrão o div tem height e width como auto, mas se não for o seu caso, aplicar inline-block tela inline-block irá funcionar para você ... veja o código que eu crio para você e é o que você procura:

div {
  display: inline-block;
}
<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>


div{
  width:auto;
  height:auto;
}

<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

Isso fará com que a largura div do pai seja igual à largura maior do elemento.


<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>

    <div id="content_lalala">
        this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
    </div>

</td>
</tr>
</table>

Eu sei que as pessoas não gostam de mesas às vezes, mas eu tenho que te dizer, eu tentei os hacks in-line do css, e eles meio que trabalharam em alguns divs mas em outros não, então foi realmente mais fácil incluir o div em expansão uma tabela ... e ... pode ter ou não a propriedade inline e ainda assim a tabela é a que vai manter a largura total do conteúdo. =)





width