How can I get 3 div boxes per line so that only 1 div per line comes out per line?

Hello. I have a question about HTml and css.

Question: Currently, there are three div boxes in a row. (Reference: http://mysnowbear.tistory.com ) . I'd like to have two div boxes or only one in a row. (Note: http://newspeppermint.com )

I downloaded another person's skin lotion from T-Story, so I don't know how three divisions can be implemented in one line. The html and css codes that seem most relevant to me are as follows, respectively

html

<div class=thumbnail>
<div class=thumb_wrapper>
<s_article_related_rep_thumbnail>
<div class='related_thumb gen_thumb' 
style='background-image:url("//i1.daumcdn.net/thumb/R0x200/?fname=[##_article_related_rep_thumbnail_link_##]")'>
<div class=gen_black></div>
</div>
</s_article_related_rep_thumbnail>
</div>

css

.thumbnail{margin:10px;padding:0;border:0}
.thumbnail .caption{padding:10px 0;height:160px}
blockquote{padding:10px 20px;margin:15px;font-size:inherit;border-left:5px
 solid #206776;font-style:italic}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,
.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,
.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,
.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,
.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,
.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,
.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9{padding:0}
.container-wrapper{width:auto!important;max-width:1170px}
#wrapper{padding:2vh 8vw}.txt1{color:#Fa0}.txt2{color:#206776}
.shorthr{width:80px;margin-top:40px}.bottombox{margin-top:24.5px;
padding-top:25px;padding-bottom:25px;background-color:#F8F8F8}
.txt_category{font-size:13px}.txt_date{color:#999;font-size:12px}.txt_title{margin-top:20px;
margin-bottom:40px;font-size:25px}.txt_subtitle{font-size:20px}

I'm really a beginner at HTML, css. A little attention helps a lot Thank you!

html css html5 css3

2022-09-21 21:24

1 Answers

Hello. I don't know much about HTML and CSS, but I'm leaving an answer because I thought it would be helpful. When I took the first link that Jinu left me and modified the class defined above the thumbnail division in Chrome (col-sm-4 = > col-sm-6), it was modified so that two classes appeared per line. Please refer to it and I hope it will help you to modify it in the direction you want.

2022-09-21 21:24

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656