Я хотел бы, чтобы расстояние между моими горизонтальными прокручивающимися изображениями было точно таким же, как этого добиться? - PullRequest
Новая
       28

Я хотел бы, чтобы расстояние между моими горизонтальными прокручивающимися изображениями было точно таким же, как этого добиться?

0 голосов
/ 19 октября 2018

Мой CSS: 

#container {
position: center;
margin-top: 80px;
z-index: 950;
{block:IfGridTheme}margin-left: 430px;{/block:IfGridTheme}
{block:IfNotGridTheme}margin-left: 435px;{/block:IfNotGridTheme}
}

.entry {
position: justify;
font-size: 12px;
color: {color:Body Text}; 
font-family: roboto condensed; 
letter-spacing: 1px; 
{block:PermalinkPage}width: 1000px;
margin-top: 15px;{/block:PermalinkPage}
word-wrap: break-word;
margin-top: 45px;
}

#container1 { 
white-space: nowrap; 
border: none; 
width: 100%;
margin-left: auto; 
margin-right: auto;
} 

#container1 > div { 
background: none; 
width: 100%; 
height: 100%; 
display: inline-block;
padding: 1% 5%; 
margin-right: 176px; 
}

.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}

и мой HTML для страницы определенного типа: 

<div id="container1">
<div>
<div class="picture_holder" style="width: 1080px;">
<div class="picture" style="width: 1080px;"><img alt="LINKTOFIRSTIMAGE" height="575" src="LINKTOFIRSTIMAGE" />
<div class="captioning">
<div class="caption"><em>CAPTION</em></div>
</div>
</div>
</div>
</div>
<div>
<div class="picture_holder" style="width: 1080px;">
<div class="picture" style="width: 1080px;"><img alt="SECONDIMAGELINKANDSOFORTH" height="575" src="SECONDIMAGELINKANDSOFORTH" />
<div class="captioning">
<div class="caption"></div>
</div>
</div>
</div>
</div>
</div>

На данной странице с последовательностью изображений, которые имеют точно такую ​​же высоту,ширина и общее соотношение сторон, расстояние между ними точно такое же (хотя и намного шире, чем хотелось бы), как на 1) этого чертежа:

enter image description here

... но в последовательности изображений, которые имеют одинаковую высоту, но дико различающиеся ширины, интервал практически не похож на 2).

Лично я тоже не хочу.Как я могу изменить свой код так, чтобы для обоих этих типов страниц и сколь угодно большего количества страниц, которые я планирую создать, интервал между каждым изображением был одинаковым количеством пикселей по всей доскесайт?Есть ли воображаемая рамка вокруг этих изображений, вызывающая проблему?

edit: Я также должен заявить, что я использую функцию HTML на веб-сайте Tumblr.com, поэтому некоторые свойства, такие как flex, никогда не кажутся доступными.

edit2: display: grid; и т.п. также не доступны.Это также вверху кода, если это поможет: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Спасибо за информацию.

1 Ответ

0 голосов
/ 20 октября 2018

Ваша структура HTML: 

<div id="parent_container">
          <div id="card_1" class="card_properties">
            <h3>Title to image 1</h3>
            <img style="background:red">
            <caption>Card 1 caption</caption>
          </div>
          <div id="card_2" class="card_properties">
              <h3>Title to image 1</h3>
               <img style="background:violet">
            <caption>Card 2 caption</caption>
          </div>
          <div id="card_3" class="card_properties">
              <h3>Title to image 1</h3>
              <img style="background:seagreen">
            <caption>Card 3 caption</caption>
          </div>
          <div id="card_4" class="card_properties">
              <h3>Title to image 1</h3>
            <img style="background:skyblue">
            <caption>Card 4 caption</caption>
          </div>
        </div>

Ваша структура CSS: 

  #parent_container <=== setting up flex for container
  {
    display: flex;
    flex-wrap: wrap;  <=== makes sure if the cards are many then they go on next line
    justify-content: space-evenly;  <=== makes sure there is equal space
  }
  .card_properties
  {
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 14px;
    width:20vw;
    height:200px;
    padding:1em;
  }

  img  <=== written this additional because I didn't have time to find image
  {
   width: 100%;
   height: 120px;
   border-radius: 14px
  }

Пример рабочего кода

...