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

根据我的评论，以下是一些可以使用的方法：浮动第一个的基本示例img&nbsp;（显然您尝试过。它需要 amin-width来避免换行）：.my-legend .legend-title {&nbsp; text-align: left;&nbsp; margin-bottom: 5px;&nbsp; font-weight: bold;&nbsp; font-size: 90%;}.my-legend .legend-scale ul {&nbsp; margin: 0;&nbsp; margin-bottom: 5px;&nbsp; padding: 0;&nbsp; float: left;&nbsp; list-style: none;}.my-legend .legend-scale ul li {&nbsp; font-size: 80%;&nbsp; list-style: none;&nbsp; margin-left: 0;&nbsp; line-height: 35px;&nbsp; margin-bottom: 2px;}.my-legend ul.legend-labels li span {&nbsp; display: block;&nbsp; float: left;&nbsp; height: 26px;&nbsp; width: 40px;&nbsp; margin-right: 15px;&nbsp; margin-left: 0;&nbsp; border: 1px solid #999;}.my-legend .legend-source {&nbsp; font-size: 70%;&nbsp; color: #999;&nbsp; clear: both;}.my-legend a {&nbsp; 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'>&nbsp; <div class='legend-scale'>&nbsp; &nbsp; <ul class='legend-labels'>&nbsp; &nbsp; &nbsp; <li><span style='background:#F7F7F7;'></span>Available</li>&nbsp; &nbsp; &nbsp; <li><span style='background:#FFA500;'></span>Parked & Loaded</li>&nbsp; &nbsp; &nbsp; <li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>&nbsp; &nbsp; &nbsp; <li><span style='background:#41B1E1;'></span>Docked</li>&nbsp; &nbsp; </ul>&nbsp; </div>包装器并display:table-cell允许vertical-alignment&nbsp;（对于较旧的浏览器）.my-legend .legend-title {&nbsp; text-align: left;&nbsp; margin-bottom: 5px;&nbsp; font-weight: bold;&nbsp; font-size: 90%;}.my-legend .legend-scale ul {&nbsp; margin: 0;&nbsp; margin-bottom: 5px;&nbsp; padding: 0;&nbsp; float: left;&nbsp; list-style: none;}.my-legend .legend-scale ul li {&nbsp; font-size: 80%;&nbsp; list-style: none;&nbsp; margin-left: 0;&nbsp; line-height: 35px;&nbsp; margin-bottom: 2px;}.my-legend ul.legend-labels li span {&nbsp; display: block;&nbsp; float: left;&nbsp; height: 26px;&nbsp; width: 40px;&nbsp; margin-right: 15px;&nbsp; margin-left: 0;&nbsp; border: 1px solid #999;}.my-legend .legend-source {&nbsp; font-size: 70%;&nbsp; color: #999;&nbsp; clear: both;}.my-legend a {&nbsp; color: #777;}.table-cell {&nbsp; display: table-cell;&nbsp; /* avalaible option */&nbsp; vertical-align: middle;}<div class="table-cell"><img src="images/homeview.png" height="500"></div><div class="table-cell">&nbsp; <p><i>*Color coded home view example</i></p>&nbsp; <hr>&nbsp; <div class='my-legend'>&nbsp; &nbsp; <div class='legend-scale'>&nbsp; &nbsp; &nbsp; <ul class='legend-labels'>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#F7F7F7;'></span>Available</li>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#FFA500;'></span>Parked & Loaded</li>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#41B1E1;'></span>Docked</li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; </div>包装器和flex&nbsp;（对于部分布局）：.my-legend .legend-title {&nbsp; text-align: left;&nbsp; margin-bottom: 5px;&nbsp; font-weight: bold;&nbsp; font-size: 90%;}.my-legend .legend-scale ul {&nbsp; margin: 0;&nbsp; margin-bottom: 5px;&nbsp; padding: 0;&nbsp; float: left;&nbsp; list-style: none;}.my-legend .legend-scale ul li {&nbsp; font-size: 80%;&nbsp; list-style: none;&nbsp; margin-left: 0;&nbsp; line-height: 35px;&nbsp; margin-bottom: 2px;}.my-legend ul.legend-labels li span {&nbsp; display: block;&nbsp; float: left;&nbsp; height: 26px;&nbsp; width: 40px;&nbsp; margin-right: 15px;&nbsp; margin-left: 0;&nbsp; border: 1px solid #999;}.my-legend .legend-source {&nbsp; font-size: 70%;&nbsp; color: #999;&nbsp; clear: both;}.my-legend a {&nbsp; color: #777;}.flex-parent{&nbsp; display:flex;&nbsp; /* avalaible option */&nbsp; align-items:center;&nbsp;/* 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">&nbsp; <p><i>*Color coded home view example</i></p>&nbsp; <hr>&nbsp; <div class='my-legend'>&nbsp; &nbsp; <div class='legend-scale'>&nbsp; &nbsp; &nbsp; <ul class='legend-labels'>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#F7F7F7;'></span>Available</li>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#FFA500;'></span>Parked & Loaded</li>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#41B1E1;'></span>Docked</li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; </div>包装器grid&nbsp;（对于主布局有用）.my-legend .legend-title {&nbsp; text-align: left;&nbsp; margin-bottom: 5px;&nbsp; font-weight: bold;&nbsp; font-size: 90%;}.my-legend .legend-scale ul {&nbsp; margin: 0;&nbsp; margin-bottom: 5px;&nbsp; padding: 0;&nbsp; float: left;&nbsp; list-style: none;}.my-legend .legend-scale ul li {&nbsp; font-size: 80%;&nbsp; list-style: none;&nbsp; margin-left: 0;&nbsp; line-height: 35px;&nbsp; margin-bottom: 2px;}.my-legend ul.legend-labels li span {&nbsp; display: block;&nbsp; float: left;&nbsp; height: 26px;&nbsp; width: 40px;&nbsp; margin-right: 15px;&nbsp; margin-left: 0;&nbsp; border: 1px solid #999;}.my-legend .legend-source {&nbsp; font-size: 70%;&nbsp; color: #999;&nbsp; clear: both;}.my-legend a {&nbsp; color: #777;}.grid-parent{&nbsp; display:grid;&nbsp; grid-template-columns: repeat(2,auto);&nbsp; /* avalaible option */&nbsp; align-items:center;&nbsp;/* 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">&nbsp; <p><i>*Color coded home view example</i></p>&nbsp; <hr>&nbsp; <div class='my-legend'>&nbsp; &nbsp; <div class='legend-scale'>&nbsp; &nbsp; &nbsp; <ul class='legend-labels'>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#F7F7F7;'></span>Available</li>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#FFA500;'></span>Parked & Loaded</li>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>&nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#41B1E1;'></span>Docked</li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; </div>inline-block或position也可以工作，但为此目的很棘手，但不是为此目的而设计的。extra , html5 自带了figure和figcaption，这似乎是典型的用法<figure>&nbsp;<img src="theImg.pct">&nbsp;<figcaption>&nbsp; &nbsp;text that belongs to theImg&nbsp;&nbsp;</figcaption></figure>

Answer 2

这够了吗？.my-legend .legend-title {&nbsp; &nbsp; text-align: left;&nbsp; &nbsp; margin-bottom: 5px;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; font-size: 90%;}.my-legend .legend-scale ul {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; margin-bottom: 5px;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; float: left;&nbsp; &nbsp; list-style: none;}.my-legend .legend-scale ul li {&nbsp; &nbsp; font-size: 80%;&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; margin-left: 0;&nbsp; &nbsp; line-height: 35px;&nbsp; &nbsp; margin-bottom: 2px;}.my-legend ul.legend-labels li span {&nbsp; &nbsp; display: block;&nbsp; &nbsp; float: left;&nbsp; &nbsp; height: 26px;&nbsp; &nbsp; width: 40px;&nbsp; &nbsp; margin-right: 15px;&nbsp; &nbsp; margin-left: 0;&nbsp; &nbsp; border: 1px solid #999;}.my-legend .legend-source {&nbsp; &nbsp; font-size: 70%;&nbsp; &nbsp; color: #999;&nbsp; &nbsp; clear: both;}.my-legend a {&nbsp; &nbsp; color: #777;}.container {&nbsp; &nbsp; display: flex;}<div class="container">&nbsp; &nbsp; <img src="https://qomra.pro/wp-content/uploads/2018/11/placeholder-1.png" width="200">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <p><i>*Color coded home view example</i></p>&nbsp; &nbsp; &nbsp; &nbsp; <hr>&nbsp; &nbsp; &nbsp; &nbsp; <div class='my-legend'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class='legend-scale'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class='legend-labels'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#F7F7F7;'></span>Available</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#FFA500;'></span>Parked & Loaded</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><span style='background:#41B1E1;'></span>Docked</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>