主页 / 问题 / 1603965
Accepted
Rodion
Asked:2025-01-04 00:08:28 +0000 UTC2025-01-04 00:08:28 +0000 UTC

如何防止 HTML 中出现换行？

  • 772

您需要将“Brusher_logo”图像设置为与“goroda_logo”位于同一行，并将“Cities”文本设置为与“Brusher”位于同一行。我正在附加代码。

<div style="text-align:left;"> <img src="Goroda logo.png" alt="goroda_logo" width="200px"> </div>
<p style=" font-family:russo one;font-size: 30px;"><b>Города</b></p>
<div style="text-align:center;"> <img src="brusher_logo.png" alt="brusher_logo" width="200px"> </div>
<p style=" text-align: center; font-family:russo one;font-size: 30px;"><b>Brusher</b></p>

html

2 个回答

  1. Best Answer

    该样式用于对齐元素display:flex。
    对于表格构造，通常使用 flex display:grid，但 flex 也可以工作。
    我特意制作了两种不同高度的图像，以便您可以确保无论前一个元素的高度如何，文本都处于同一水平。这是使用参数实现的display:flex; flex-direction:column; justify-content: space-between。我不会在这里描述 CSS 课程，如果你有兴趣，请自己阅读。
    P.S. 不要在 html 中写 css。一定要将它们分开。

    img {
  display: block;
  width: 100%;
  height: 100px;
  background: green;
  border: 1px solid black;
}
.flex:last-child img {
  height: 150px;
}

p {
  font-size: 30px;
  margin: 0;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
    <div class="grid">
  <div class="flex">
    <img src="Goroda logo.png" alt="goroda_logo" width="200px">
    <p><b>Города</b></p>
  </div>
  <div class="flex">
    <img src="brusher_logo.png" alt="brusher_logo" width="200px">
    <p><b>Brusher</b></p>
  </div>
</div>

    • 1 

  2. <div style="display: flex; white-space: nowrap; justify-content: flex-start;">
  <div style="display: flex; text-align:left;"> <img src="Goroda logo.png" alt="goroda_logo" width="200px"> </div>
  <div style="display: flex; text-align: center;"> <img src="brusher_logo.png" alt="brusher_logo" width="200px"> </div>
</div>

<div style="display: flex; white-space: nowrap;">
  <p style=" text-align: center; font-family:russo one;font-size: 30px; margin-left: 10px;"><b>Brusher</b></p>
  <p style=" font-family:russo one; font-size: 30px; margin-left: 10px;"><b>Города</b></p>
</div>

    我认为是这样，但并不完全如此

    • 0

相关问题