All geek questions in one place

Images do not line up and the text will not pass under img

I am trying to get some images to line them in the content box, but they will not go side by side. Instead, they go along each line. The text should also be below the image, and not to the right of it. Can anyone see the reason?

I also need to find a way to line them horizontally, even if the text below the image has different lengths of up to 30 characters.

Script Link: https://fiddle.jshell.net/jkyq9y0u/

<div id="content_box">
  <div id="img">
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
  </div>
</div>

#content_box {
  background-color: #ffffff;
  min-width: 100%;
  min-height: 75vh;
  text-align: center;
  overflow-y: auto;
  display: inline-block;
}

/* styling for the movie images and titles */

#img {
  min-height: 100%;
  max-width: 60%;
  display: inline-block;
}

.image_box {
  min-width: 100%;
  min-height: 100%;
  display: inline-block;
}

.movie_img {
  max-width: 20%;
  height: auto;
  border-radius: 10px;
  display: inline-block;
}

.title {
  min-height: 100px;
  max-width: 100%;
  margin-bottom: 100px;
  display: inline-block;
}
+4
source share
4 answers

style_title , . inline-block , , .

#content_box {
  background-color: #ffffff;
  min-width: 100%;
  min-height: 75vh;
  text-align: center;
  overflow-y: auto;
  display: inline-block;
}

/* styling for the movie images and titles */

#img {
  /*max-width: 60%;
  display: inline-block;*/
}

.image_box {
  display: inline-block;
  width:30%;
}

.style_title
{
  display:inline-block;
}

.movie_img {
  height: auto;
  border-radius: 10px;
  display: inline-block;
}

.title {
  min-height: 100px;
  max-width: 100%;
  margin-bottom: 100px;
  display: block;
}
<div id="content">
  <div id="img">
    <a href="link" class="style_title" target="_blank">
      <div  class="image_box image_id">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div class="image_box image_id">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div class="image_box image_id">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div  class="image_box image_id">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div  class="image_box image_id">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
  </div>
</div>
Hide result
+1

css :

.style_title{
   float: left;
}

"a" . , :

#img > a{
   float: left;
}

, : https://www.w3schools.com/css/css_float.asp

+1

- .

content_box css, im .

, , ;

, , ;

, - , ;

:

<div id="content_box">
 <div id="my_block">
 <div id="my_block_content">something</div>
 </div>
</div>

CSS;

#content_box{
 position:fixed;   /*Could be anything as long its there*/
}

#my_block{
 position:relative;   
 width : 300px;
 height : 400px;
 display: inline-block;
}

#my_block_content{
 position:absolute;     /*Content absolute inside the inline block*/
 top:30px;
 right:0px;
 min-width:95px;
 height:300px;


}
+1

css.

#content_box {
  background-color: #ffffff;
  min-width: 100%;
  min-height: 75vh;
  text-align: center;
  overflow-y: auto;
  display: inline-block;
}

/* styling for the movie images and titles */

#img {
  min-height: 100%;
  max-width: 100%;
  display: inline-block;
  float: left;
}

.image_box {
  min-width: 100%;
  height: auto;
  display: inline-block;
}

.movie_img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: inline-block;
}

.title {
  min-height: 100px;
  max-width: 100%;
  margin-bottom: 100px;
  display: inline-block;
}
#content{float: left;width: 100%;}
.style_title{width: 25%;float: left;padding: 5px;}
<div id="content">
  <div id="img">
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
    <a href="link" class="style_title" target="_blank">
      <div id="image_id" class="image_box">
        <img class="movie_img" src="https://images-na.ssl-images-amazon.com/images/M/MV5BOGNkMzliMGMtMDI5Ni00OTZkLTgyMTYtNzk5ZTY1NjVhYjVmXkEyXkFqcGdeQXVyNTAzMTY4MDA@._V1_UY209_CR0,0,140,209_AL_.jpg">
      </div>
      <div class="title">The Disaster Artist (2017)</div>
    </a>
  </div>
</div>
Hide result
+1

Source: https://habr.com/ru/post/1690217/

More articles:


All Articles