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 （显然您尝试过。它需要 amin-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>

• 包装器并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>

• 包装器和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>

• 包装器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也可以工作，但为此目的很棘手，但不是为此目的而设计的。

extra , html5 自带了figure和figcaption，这似乎是典型的用法

<figure>

 <img src="theImg.pct">

 <figcaption>

   text that belongs to theImg 

 </figcaption>

</figure>

Answer 2

这够了吗？

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

}

.container {

    display: flex;

}

<div class="container">

    <img src="https://qomra.pro/wp-content/uploads/2018/11/placeholder-1.png" width="200">

    <div>

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

</div>