CSS размещение, изображение рядом с легендой - PullRequest
Новая
       0

CSS размещение, изображение рядом с легендой

2 голосов
/ 16 марта 2020

Здравствуйте. В настоящее время я пытаюсь разместить легенду рядом с одним из моих изображений, и у меня возникли проблемы с размещением.

Я хотел бы поднять легенду слева или справа от изображения. Это мой текущий код: 

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

Ответы [ 2 ]

1 голос
/ 17 марта 2020

Из моего комментария можно использовать несколько методов:

  • basi c пример с плавающей запятой первого 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>
  • оболочки и 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>
1 голос
/ 16 марта 2020

Достаточно ли этого? 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...