Largeur dynamique avec inline-block

J'ai deux <div> éléments, l'un à côté de l'autre. Les deux ont l'attribut CSS display: inline-block;. Maintenant, la deuxième <div> élément a une largeur fixe de 100 px, alors que le premier <div> élément n'a pas de largeur fixe: il dépend de la taille de la fenêtre.

Mon problème est que la première <div> élément de propagation de plus de 100% verticalement si la fenêtre est étroite. Je voudrais restreindre sa largeur à 100% moins 100px, de sorte que les deux <div> éléments peuvent s'aligner les uns à côté des autres en tout temps.

J'ai regardé les posts avec des questions similaires, mais aucun n'est vraiment traité le cas de inline-block.

MODIFIER: Voici un jsfiddle: http://jsfiddle.net/y3sXu/ je veux la première <div> de fournir un peu de place pour la deuxième <div> sur la même ligne.

les exemples de code serait d'aide ou si vous avez le temps jsfiddle.net
Fait. Veuillez voir ci-dessus!

OriginalL'auteur Randomblue | 2011-08-03

css html

8

Il n'y a pas de raison particulière d'utiliser display: inline-block pour ce faire.

Voici un nettoyage de mise en œuvre à l'aide de flotteurs place: http://jsfiddle.net/y3sXu/14/
```
<div id="container">
    <div id="DivB">b</div>
    <div id="DivA">a</div>
</div>

#container {
    overflow: hidden;
}
#DivA {
    overflow: hidden;
}
#DivB {
    float: right;
    width: 100px;
}
```
Merci. La solution qui fonctionne le mieux. Ce qui ne l' overflow: hidden; faire exactement? C'est encore un peu mystérieux pour moi!
overflow: hidden sur #container contient les flotteurs. overflow: hidden sur #DivA est expliqué ici.
Merci thirtydot.

OriginalL'auteur thirtydot
3

Je crois que je comprends ce que vous demandez. http://jsfiddle.net/y3sXu/6/

Je suis allé pour un traditionnel disposition en deux colonnes, comme il semble que la meilleure façon de résoudre votre problème.

float a été utilisé pour s'assurer que la main droite div se trouve toujours sur la droite, et margin-left pour garder la gauche div loin. overflow:hidden est utilisé à bon marché et gai clearfix.

Nice! J'ai essayé quelque chose comme ça, mais la seule chose qui me manquait était le overflow:hidden... bon travail!

OriginalL'auteur Mig
3

C'est une vieille question, mais a un certain poids dans Google donc, j'ai pensé le mettre à jour avec une nouvelle réponse. De façon plus moderne d'accomplir ceci est de coller avec display:inline-block; et l'utilisation calc pour la largeur de l'élément variable.

Aussi longtemps que vous avez une largeur fixe élément inline width: 150px, vous pouvez décaler la variable de la largeur de l'élément de la largeur fixe calc(100% - 150px).

Votre code devrait ressembler à ceci:
```
.fixed-width-element {
  display: inline-block;
  width: 150px;
}

.variable-width-element {
  display: inline-block;
  width: calc(100% - 150px);
}
```
En outre, assurez-vous d'ajouter de l'espace entre les chiffres et le '-'. par exemple incorrect: calc(100%-150 px); corriger: calc(100% - 150 px);

OriginalL'auteur staypuftman
1

meilleure façon que je peux figure de le faire est avec un positionnement absolu:
```
div#TextB{
    position:absolute;
    right:10px;
    top:10px;
}

div#master{
    margin-right:120px;
}
```
http://jsfiddle.net/Vnxr7/1

+1: Il est proche de ce que je veux, mais se sent comme un hack.
c'est parce qu'il est". XD Désolé, mais je n'ai jamais fait quelque chose comme ça avec le css et le html seul.

OriginalL'auteur Joseph Marikle
0

Il y a une très laid solution:
Définir le dépassement de l'extérieur div caché, prendre la div de la dom à l'aide de position:relative, réglage de la gauche à 100px et la largeur à 100%.

Vous avez à jouer avec l'écran, la position et à gauche/en haut etc. ou revenir avec un peu plus de détails pour que l'on puisse savoir ce que vous voulez atteindre.

Beurk. J'ai fourni un jsfiddle.
Essayez ceci: jsfiddle.net/3PJNh/2
Elle fonctionne. Mais c'est horrible.
Je sais, je ne suis pas heureux non plus. Il existe de meilleures solutions postet ici.

OriginalL'auteur Sgoettschkes

quoi à ce sujet ?

div {
    background:green;
    margin-right:100px;
}


#TextB{
    width:100px;
    background:red;
    float:right;
    margin:0px;
}

Version mise à jour

OriginalL'auteur AlexC

0

Simplement donner la div extérieure d'un rembourrage de 50px sur les deux côtés gauche et droit

MODIFIER
L'endroit où tu veux mettre le fossé:
```
<div width="100px" height="1em">&nbsp;<div>
```
Ne fonctionne pas. Il y a remplissage, mais plutôt de l'espace pour la deuxième <div>, c'est juste un espace.
Alors u ne souhaitez il devrait y avoir un 100px espace libre et le contenu de la deuxième div doit être montré ?
Exactement! Vous l'avez.
Voir mon edit. Est-ce cela que tu veux ? Ne pas essayer de violon, mais sur la page de u le souhaitez. Le violon peut avoir quelques bugs
Ne fonctionne pas! (Et je ne pense pas que le violon a de nombreux bugs.)

OriginalL'auteur kritya

Vous devez vous connecter pour publier un commentaire.