0
votes

Les points de balle HTML vont à l'extérieur de div

J'essaie d'avoir une carte HTML avec un titre, une image à droite et une liste de balle à gauche. Cependant, la liste des balles sort de la carte. Comment puis-je rendre la division de la carte à s'adapter à la longueur de son contenu?

Voici le code: P>

<div class="card">
  <h3><b>CARD TITLE</b></h3>
  <div class="card_excerpt">
    <ul>
      <li> Bullet 1</li>
      <li> Bullet 2</li>
      <li> Bullet 3</li>
      <li> Bullet 4</li>
      <li> Bullet 5</li>
      <li> Bullet 6</li>
      <li> Bullet 7</li>
    </ul>
  </div>
  <div class="card_image"> <img src="some img" /> </div>
</div>

html css html-lists bulletedlist

0 commentaires

4 Réponses :

1
votes

Vous pouvez ajouter Effacer: code> à .Card_image code>

p>



<div class="card">
  <h3><b>CARD TITLE</b></h3>
  <div class="card_excerpt">
    <ul>
      <li> Bullet 1</li>
      <li> Bullet 2</li>
      <li> Bullet 3</li>
      <li> Bullet 4</li>
      <li> Bullet 5</li>
      <li> Bullet 6</li>
      <li> Bullet 7</li>
    </ul>
  </div>
  <div class="card_image"> <img src="some img" /> </div>
</div>

2 commentaires

Merci beaucoup! Maintenant, cela fonctionne, mais l'image démarre là où se termine la liste de bulle (voir la photo que j'ai ajoutée à la question). Savez-vous comment je peux mettre les deux choses côte à côte?

Vous pouvez utiliser Flexbox. Ou vous pouvez utiliser la grille. Regardez-le si vous êtes intéressé.

0
votes

De plus, si vous pouvez modifier une structure de carte, vous pouvez utiliser Flexbox au lieu de flotter pour positionner votre contenu.

<div class="card">
  <h3><b>CARD TITLE</b></h3>
  <div class="card_inner">
    <div class="card_image"> <img src="http://placekitten.com/600/600" /> </div>
    <div class="card_excerpt">
      <ul>
        <li> Bullet 1</li>
        <li> Bullet 2</li>
        <li> Bullet 3</li>
        <li> Bullet 4</li>
        <li> Bullet 5</li>
        <li> Bullet 6</li>
        <li> Bullet 7</li>
      </ul>
    </div>
  </div>
</div>

0 commentaires

1
votes

Il peut facilement être fait avec Flexbox, sans modifier le HTML

<div class="card">
    <h3><b>CARD TITLE</b></h3>
    <div class="card_excerpt">
      <ul>
        <li> Bullet 1</li>
        <li> Bullet 2</li>
        <li> Bullet 3</li>
        <li> Bullet 4</li>
        <li> Bullet 5</li>
        <li> Bullet 6</li>
        <li> Bullet 7</li>
      </ul>
    </div>
    <div class="card_image"> <img src="https://picsum.photos/150/150" /> </div>
  </div>

0 commentaires

0
votes

Essayez ceci ..

.CSS strud> p> xxx pré>

.html strong> P>

<div class="row">
  <div class="card col-12 dFlex" >
    <div class="col-6 card_excerpt">
      <h3><b>CARD TITLE</b></h3>
      <div>
        <ul>
          <li> Bullet 1</li>
          <li> Bullet 2</li>
          <li> Bullet 3</li>
          <li> Bullet 4</li>
          <li> Bullet 5</li>
          <li> Bullet 6</li>
          <li> Bullet 7</li>
        </ul>
      </div>
    </div>
    <div class="col-6 card_image fRight"> <img src="some img"/> </div>
  </div>
</div>

0 commentaires