Chcę umieścić tekst obok zdjęcia na mojej stronie >. Chcę też, aby tekst był w pudełku, a nie tylko ciąg znaków na stronie.

-4
John Doe 2 kwiecień 2020, 00:22

4 odpowiedzi

Najlepsza odpowiedź

Jedną mniej złożoną opcją byłoby użycie tabeli:

p {
  border: 2px solid #000;
  padding:10px;
  display:inline;
}
<table style="width: 100%;">
  <tr>
    <th>
      <img scr="your img here"/>
    </th>
    <th>
      <p> your text here </p>
    </th>
  </tr>
</table>

Użyj Inline CSS, aby utworzyć granice, w których chcesz je.

-1
j3ff 2 kwiecień 2020, 11:16

Wypróbuj ten fragment

var btn = document.querySelector('button');
var container = document.querySelector('.container')


btn.addEventListener('click', function() {
  if (container.classList.contains('end')) {
    container.classList.toggle('end')
    container.classList.toggle('start')
  } else if (container.classList.contains('start')) {
    container.classList.toggle('start')
    container.classList.toggle('stretching')
  } else if (container.classList.contains('stretching')) {
    container.classList.toggle('stretching')
    container.classList.toggle('center')
  } else if (container.classList.contains('center')) {
    container.classList.toggle('center')
    container.classList.toggle('end')
  }
})
.container {
  width: 400px;
  display: flex;
  justify-content: space-between;
}

.end {
  align-items: flex-end;
  /* You can set it to "flex-start", "center" Or "stretch" According to the most suitable one to you. */
}

.start {
  align-items: flex-start;
}

.center {
  align-items: center;
}

.stretching {
  align-items: stretch;
}

img {
  width: 50%;
}

.text {
  width: 50% text-align: center;
  border: 2px solid black;
}
<div class="container end">
  <img src="https://conceptdraw.com/a1701c3/p41/preview/640/pict--game-pad-computers-vector-stencils-library">
  <div class="text">This is a text sample</div>
</div>
<br>
<button type="button">Change View</button>
0
Seif El-Din Sweilam 1 kwiecień 2020, 22:02

Możesz ustawić atrybut w CSS dla wyświetlania tekstu: Inline;)

-4
majed asiri 1 kwiecień 2020, 21:31

Stworzyłem dwa Divs i umieściłem obraz w jednym i tekście w drugim div. Wtedy zrobiłem wizerunek względny i tekst absolutny w CSS. Jest prawdopodobnie lepsze sposoby, aby to zrobić, ale to był pierwszy sposób, z którym wymyśliłem.

 .right-text{
  position: absolute;
    top: 200x;
    right: 240px;
    width: 200px;
    height: 200px;
    border: 3px solid #73AD21;

}
.image{
  position: relative;
}

Wizualny mojego kodu `

0
Karen Bergan 1 kwiecień 2020, 22:30