Question

我有一张float: left的照片。目标是在图片旁边再有2个文本框。但是第二个文本框位于第一个文本框下方，无论我是否设置宽度都没有关系。那里出了什么问题？

我认为可以浮动一个元素来浮动所有即将到来的元素，直到您清除不再应该浮动的元素为止

.CollaboDescription {
  margin-right: 5%;
  margin-left: 5%;
  padding: 2.5%;
  border: 2px solid #000
}

.CollaboProfilePicture {
  float: left;
  margin-right: 50px
}

.CollaboPersonalDescription_1 {
  display: block;
  margin: 0 400px 0 0;
  font: 15px Oxygen, sans-serif;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-decoration: none
}

.CollaboPersonalDescriptionNoFloat {
  display: block;
  margin: 0;
  font: 15px Oxygen, sans-serif;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-decoration: none
}

<div class="ce_image CollaboProfilePicture first block">
  <figure class="image_container" itemscope="" itemtype="http://schema.org/ImageObject" itemprop="associatedMedia">
    <img src="https://www.martin-missfeldt.de/images-pictures/grafik-illustration/bild-mit-wort-bild.jpg" alt="" itemprop="image" width="250" height="333">
  </figure>
</div>
<div class="ce_text CollaboPersonalDescription_1 block">
  <table style="border-collapse: collapse; width: x 100%;">
    <tbody>
      <tr style="height: 16px;">
        <td style="width: 15.0528%; height: 28px; padding-right: 60px;">Geburtsjahr:</td>
        <td style="width: 84.9472%; height: 28px;">2000</td>
      </tr>
      <tr style="height: 16px;">
        <td style="width: 15.0528%; height: 28px;">Lieblingsplatz:</td>
        <td style="width: 84.9472%; height: 28px;">Jumppark Zürich</td>
      </tr>
      <tr style="height: 16px;">
        <td style="width: 15.0528%; height: 28px;">Favorite trick:</td>
        <td style="width: 84.9472%; height: 28px;">Tuck No Hander</td>
      </tr>
      <tr style="height: 16px;">
        <td style="width: 15.0528%; height: 28px;">Bike Model:</td>
        <td style="width: 84.9472%; height: 28px;">Canyon Stiched 360</td>
      </tr>
      <tr style="height: 16px;">
        <td style="width: 15.0528%; height: 28px;">Hoodie:</td>
        <td style="width: 84.9472%; height: 28px;">GBSS Black</td>
      </tr>
    </tbody>
  </table>
  <p style="margin-top: 0px;">&nbsp;</p>
</div>
<!-- indexer::stop -->
<div class="mod_eventlist CollaboPersonalDescriptionNoFloat block">
  <h2>Upcoming Events</h2>
  <div class="event layout_upcoming upcoming even first last cal_4" itemscope="" itemtype="http://schema.org/Event">
    <time datetime="2018-10-24" class="date" itemprop="startDate">24.10.2018</time>
    <a href="https://www.zueritrails.ch/jumppark/" title="DirtContest Jumppark (Mittwoch, 24.10.2018)" itemprop="url">DirtContest Jumppark</a>
  </div>
</div>
<!-- indexer::continue -->
<div class="ce_hyperlink last block">
  <figure class="image_container" itemscope="" itemtype="http://schema.org/ImageObject">
    <a href="https://www.facebook.com/robin.bachofner.509" class="hyperlink_img" rel="" itemprop="contentUrl">
      <img src="assets/images/a/Instagram%20button_black-e3e5b7ad.png" alt="" itemprop="image" width="80" height="80">
    </a>
  </figure>
</div>

Answer 1

将以下属性分配给那些“文本块”：

display: inline-block;
width: 300px;
vertical-align: top;

（并在整页模式下查看代码段）

也就是说，inline-block;允许服务器块彼此相邻，固定宽度可确保它们不会在整个容器中延伸（如果其中包含足够的内容，这将是默认值），并且{{ 1}}仅确保如果其中一个以上彼此相邻，则它们沿其顶部对齐（而不是默认的vertical-align: top）

baseline

.CollaboDescription {
  margin-right: 5%;
  margin-left: 5%;
  padding: 2.5%;
  border: 2px solid #000
}

.CollaboProfilePicture {
  float: left;
  margin-right: 50px
}

.CollaboPersonalDescription_1 {
  display: inline-block;
  width: 300px;
  vertical-align: top;
  font: 15px Oxygen, sans-serif;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-decoration: none
}

.CollaboPersonalDescriptionNoFloat {
  display: inline-block;
  width: 300px;
  vertical-align: top;
  margin: 0;
  font: 15px Oxygen, sans-serif;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-decoration: none
}

CSS Float具有多个元素

1 个答案: