web-dev-qa-db-fra.com

CSS pour arrêter le retour à la ligne sous image

J'ai le balisage suivant:

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

Je le veux pour que, si le texte se termine, il ne soit pas placé dans la "colonne" de l'image. Je sais que je peux le faire avec un table (ce que je faisais) mais ce n'est pas réalisable pour cette raison .

J'ai essayé ce qui suit sans succès:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

J'ai aussi essayé float: right.

Merci.

EDIT: Je veux qu'il ressemble à ceci:

IMG   Text starts here and keeps going... and
      wrap starts here.

Pas comme ça:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.
csscss3css-floatword-wrap
78
Nick

Étant donné que cette question suscite beaucoup d'opinions et que c'était la réponse acceptée, j'ai ressenti le besoin d'ajouter la clause de non-responsabilité suivante:

Cette réponse était spécifique à la question du PO (qui avait la largeur définie dans les exemples). Bien que cela fonctionne, il vous faut une largeur sur chacun des éléments, l'image et le paragraphe. À moins que ce ne soit votre exigence, je vous recommande d'utiliser solution de Joe Conlin qui est affichée comme une autre réponse à cette question.

L'élément span est un élément en ligne, vous ne pouvez pas changer sa largeur en CSS.

Vous pouvez ajouter le code CSS suivant à votre étendue pour pouvoir en modifier la largeur.

display: block;

Une autre façon, qui a généralement plus de sens, consiste à utiliser un <p> élément en tant que parent pour votre <span>.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

Puisque <p> est un élément block, vous pouvez définir sa largeur à l’aide de CSS, sans rien modifier.

Mais dans les deux cas, étant donné que vous avez maintenant un élément de bloc, vous devez faire flotter l'image pour que votre texte ne passe pas tous en dessous de votre image.

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

P.S. Au lieu de float:left sur l'image, vous pouvez aussi mettre float:right sur li p mais dans ce cas, vous aurez également besoin de text-align:left pour réaligner le texte correctement.

P.S.S. Si vous avez opté pour la première solution consistant à ne pas ajouter de <p> élément, votre CSS devrait ressembler à ceci:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}
31
Dan

Réponse très simple à ce problème qui semble attirer beaucoup de monde:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

Voir exemple: http://jsfiddle.net/vandigroup/upKGe/132/

240
Joe Conlin

Pour ceux qui veulent des informations générales, voici un article court expliquant pourquoi overflow: hidden travaux. Cela a à voir avec le soi-disant contexte de formatage de bloc . Cela fait partie des spécifications du W3C (c’est-à-dire qu’il ne s’agit pas d’un hack) et est fondamentalement la région occupée par un élément avec un flux de type bloc.

Chaque fois qu'il est appliqué, overflow: hidden crée un contexte de formatage de bloc nouveau. Mais ce n'est pas la seule propriété capable de déclencher ce comportement. Citant un présentation par Fiona Chan du groupe Sydney Web Apps:

  • float: gauche/droite
  • débordement: masqué/auto/défilement
  • display: table-cell et toutes les valeurs liées à la table/inline-block
  • position: absolue/fixe
24
hqcasanova

Si vous voulez le margin-left pour travailler sur un élément span, vous devrez le rendre display: inline-block ou display:block ainsi que.

3
Gareth

réglage display:flexpour le texte a fonctionné pour moi.

1
Mamrez

Enveloppez une div autour de l’image et de la plage et ajoutez ce qui suit au CSS comme ceci:

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

MOINS

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }
1
hawkeye126