具有多个元素的 CSS Float [关闭]

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;

（并以全页模式查看 sn-p）

即，inline-block; 允许多个块彼此相邻，固定宽度确保它们不会延伸到整个容器（如果它们内部有足够的内容，这将是默认设置），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
}

<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>