html - CSS 放置，图例旁边的图像

Question

您好，我目前正在尝试在我的一张图片旁边放置一个图例，但我在放置时遇到了问题。

我想将图例放在图像的左侧或右侧。这是我当前的代码:

.my-legend .legend-title {
  text-align: left;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 90%;
}

.my-legend .legend-scale ul {
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  float: left;
  list-style: none;
}

.my-legend .legend-scale ul li {
  font-size: 80%;
  list-style: none;
  margin-left: 0;
  line-height: 35px;
  margin-bottom: 2px;
}

.my-legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 26px;
  width: 40px;
  margin-right: 15px;
  margin-left: 0;
  border: 1px solid #999;
}

.my-legend .legend-source {
  font-size: 70%;
  color: #999;
  clear: both;
}

.my-legend a {
  color: #777;
}

<img src="images/homeview.png" height="500">
<p><i>*Color coded home view example</i></p>
<hr>
<div class='my-legend'>
  <div class='legend-scale'>
    <ul class='legend-labels'>
      <li><span style='background:#F7F7F7;'></span>Available</li>
      <li><span style='background:#FFA500;'></span>Parked & Loaded</li>
      <li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>
      <li><span style='background:#41B1E1;'></span>Docked</li>
    </ul>
  </div>

Answer 1

根据我的评论，这些是一些可以使用的方法:

float 第一个 img 的基本示例(你显然尝试过。它需要一个 min-width 以避免换行):

.my-legend .legend-title {
  text-align: left;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 90%;
}

.my-legend .legend-scale ul {
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  float: left;
  list-style: none;
}

.my-legend .legend-scale ul li {
  font-size: 80%;
  list-style: none;
  margin-left: 0;
  line-height: 35px;
  margin-bottom: 2px;
}

.my-legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 26px;
  width: 40px;
  margin-right: 15px;
  margin-left: 0;
  border: 1px solid #999;
}

.my-legend .legend-source {
  font-size: 70%;
  color: #999;
  clear: both;
}

.my-legend a {
  color: #777;
}
img {float:left;}
body {min-width:600px;

<img src="images/homeview.png" height="500">
<p><i>*Color coded home view example</i></p>
<hr>
<div class='my-legend'>
  <div class='legend-scale'>
    <ul class='legend-labels'>
      <li><span style='background:#F7F7F7;'></span>Available</li>
      <li><span style='background:#FFA500;'></span>Parked & Loaded</li>
      <li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>
      <li><span style='background:#41B1E1;'></span>Docked</li>
    </ul>
  </div>

wrapper 和 display:table-cell允许 vertical-alignment (对于旧浏览器)

.my-legend .legend-title {
  text-align: left;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 90%;
}

.my-legend .legend-scale ul {
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  float: left;
  list-style: none;
}

.my-legend .legend-scale ul li {
  font-size: 80%;
  list-style: none;
  margin-left: 0;
  line-height: 35px;
  margin-bottom: 2px;
}

.my-legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 26px;
  width: 40px;
  margin-right: 15px;
  margin-left: 0;
  border: 1px solid #999;
}

.my-legend .legend-source {
  font-size: 70%;
  color: #999;
  clear: both;
}

.my-legend a {
  color: #777;
}

.table-cell {
  display: table-cell;
  /* avalaible option */
  vertical-align: middle;
}

<div class="table-cell"><img src="images/homeview.png" height="500"></div>
<div class="table-cell">
  <p><i>*Color coded home view example</i></p>
  <hr>
  <div class='my-legend'>
    <div class='legend-scale'>
      <ul class='legend-labels'>
        <li><span style='background:#F7F7F7;'></span>Available</li>
        <li><span style='background:#FFA500;'></span>Parked & Loaded</li>
        <li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>
        <li><span style='background:#41B1E1;'></span>Docked</li>
      </ul>
    </div>
  </div>

wrapper 和 flex (对于部分布局):

.my-legend .legend-title {
  text-align: left;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 90%;
}

.my-legend .legend-scale ul {
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  float: left;
  list-style: none;
}

.my-legend .legend-scale ul li {
  font-size: 80%;
  list-style: none;
  margin-left: 0;
  line-height: 35px;
  margin-bottom: 2px;
}

.my-legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 26px;
  width: 40px;
  margin-right: 15px;
  margin-left: 0;
  border: 1px solid #999;
}

.my-legend .legend-source {
  font-size: 70%;
  color: #999;
  clear: both;
}

.my-legend a {
  color: #777;
}

.flex-parent{
  display:flex;
  /* avalaible option */
  align-items:center;
 /* also : justify-content: center or else */
}

<div class="flex-parent">
<div class="flex-child"><img src="images/homeview.png" height="500"></div>
<div class="flex-child">
  <p><i>*Color coded home view example</i></p>
  <hr>
  <div class='my-legend'>
    <div class='legend-scale'>
      <ul class='legend-labels'>
        <li><span style='background:#F7F7F7;'></span>Available</li>
        <li><span style='background:#FFA500;'></span>Parked & Loaded</li>
        <li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>
        <li><span style='background:#41B1E1;'></span>Docked</li>
      </ul>
    </div>
  </div>
  </div>

wrapper grid (对主要布局有用)

.my-legend .legend-title {
  text-align: left;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 90%;
}

.my-legend .legend-scale ul {
  margin: 0;
  margin-bottom: 5px;
  padding: 0;
  float: left;
  list-style: none;
}

.my-legend .legend-scale ul li {
  font-size: 80%;
  list-style: none;
  margin-left: 0;
  line-height: 35px;
  margin-bottom: 2px;
}

.my-legend ul.legend-labels li span {
  display: block;
  float: left;
  height: 26px;
  width: 40px;
  margin-right: 15px;
  margin-left: 0;
  border: 1px solid #999;
}

.my-legend .legend-source {
  font-size: 70%;
  color: #999;
  clear: both;
}

.my-legend a {
  color: #777;
}

.grid-parent{
  display:grid;
  grid-template-columns: repeat(2,auto);
  /* avalaible option */
  align-items:center;
 /* also : justify-content: center or else */
}

<div class="grid-parent">
<div class="grid-child"><img src="images/homeview.png" height="500"></div>
<div class="grid-child">
  <p><i>*Color coded home view example</i></p>
  <hr>
  <div class='my-legend'>
    <div class='legend-scale'>
      <ul class='legend-labels'>
        <li><span style='background:#F7F7F7;'></span>Available</li>
        <li><span style='background:#FFA500;'></span>Parked & Loaded</li>
        <li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>
        <li><span style='background:#41B1E1;'></span>Docked</li>
      </ul>
    </div>
  </div>
  </div>

inline-block或 position coud 也可以工作，但为此目的很棘手，但不是为此而设计的。

额外 , html5 自带 figure和 figcaption ，这似乎是这里的典型用法

<figure>
 <img src="theImg.pct">
 <figcaption>
   text that belongs to theImg 
 </figcaption>
</figure>