多行中有多个div，但位于相同位置

时间：2017-10-19 11:24:31

标签： html css

我需要做多个div，但它们必须在同一位置的同一行。我真的不知道如何用英语说出来。这就是我真正需要的，所以我的意思是我需要这个：

X     X
X     X
X

但目前我有这个：

X  x
 X  x
  X

我的代码：

＆＃13;
＆＃13; 
.buy-one {
    		-moz-column-count: 2;
      		-webkit-column-count: 2;
      		column-count: 2;
    	}
    
    	.buy-text {
    		display: inline-block;
    		font-family: 'Open Sans', sans-serif;
    		font-size: 14px;
    		font-weight: 600;
    	}
    	
    	.buy-img {
    		display: inline-block;
    		vertical-align: middle;
    	}
＆＃13; 
  <div class="buy">
       				<div class="buy-one" style="display:block;">
       					<div style="display: block; clear: both;">
       						<img class="buy-img" src="" alt="zdjecie">
       						<p class="buy-text">xyz.</p>
    					</div>
                        <div style="display: block; clear: both;">
       						<img class="buy-img" src="" alt="zdjecie">
       						<p class="buy-text">xyz.</p>
    					</div>
                       <div style="display: block; clear: both;">
       						<img class="buy-img" src="" alt="zdjecie">
       						<p class="buy-text">xyz.</p>
    					</div>
       				</div>
       			</div>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

这是你想要的，请告诉我。

＆＃13;
＆＃13; 
<div class="buy">
  <div class="buy-one" style="display:block;">
    <div style="display: block; clear: both;">
      <img class="buy-img" src="https://www.gravatar.com/avatar/7e1dd083be890b04a3c082fecdd31310?s=32&d=identicon&r=PG&f=1" alt="zdjecie">
      <p class="buy-text">xyz.</p>
    </div>
    <div style="display: block; clear: both;">
      <img class="buy-img" src="https://www.gravatar.com/avatar/7e1dd083be890b04a3c082fecdd31310?s=32&d=identicon&r=PG&f=1" alt="zdjecie">
      <p class="buy-text">xyz.</p>
    </div>
    <div style="display: block; clear: both;">
      <img class="buy-img" src="https://www.gravatar.com/avatar/7e1dd083be890b04a3c082fecdd31310?s=32&d=identicon&r=PG&f=1" alt="zdjecie">
      <p class="buy-text">xyz.</p>
    </div>
    <div style="display: block; clear: both;">
      <img class="buy-img" src="https://www.gravatar.com/avatar/7e1dd083be890b04a3c082fecdd31310?s=32&d=identicon&r=PG&f=1" alt="zdjecie">
      <p class="buy-text">xyz.</p>
    </div>
    <div style="display: block; clear: both;">
      <img class="buy-img" src="https://www.gravatar.com/avatar/7e1dd083be890b04a3c082fecdd31310?s=32&d=identicon&r=PG&f=1" alt="zdjecie">
      <p class="buy-text">xyz.</p>
    </div>
    <div style="display: block; clear: both;">
      <img class="buy-img" src="https://www.gravatar.com/avatar/7e1dd083be890b04a3c082fecdd31310?s=32&d=identicon&r=PG&f=1" alt="zdjecie">
      <p class="buy-text">xyz.</p>
    </div>
    <div style="display: block; clear: both;">
      <img class="buy-img" src="https://www.gravatar.com/avatar/7e1dd083be890b04a3c082fecdd31310?s=32&d=identicon&r=PG&f=1" alt="zdjecie">
      <p class="buy-text">xyz.</p>
    </div>
  </div>
</div>
＆＃13; 
Attr(key).eq(value)
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

上述评论的交叉发布：

＆＃13;
＆＃13; 
.buy-item {
  /* just for better visibility */
  border: 2px solid lightgreen;
  box-sizing: border-box;
}

.buy-one {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.buy-item {
  flex: 0 0 50%;
}

    .buy-text {
        display: inline-block;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
    }

    .buy-img {
        display: inline-block;
        vertical-align: middle;
    }
＆＃13; 
<div class="buy">
                <div class="buy-one">
                    <div class="buy-item">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce euismod ligula sit amet ex imperdiet, vitae ullamcorper eros volutpat. Aenean vehicula vestibulum sapien, quis finibus orci malesuada et. Cras sodales bibendum neque, vitae volutpat odio feugiat ac. Nulla aliquam enim maximus ligula vehicula congue. In faucibus mollis semper. Nunc sed scelerisque mi, quis cursus arcu. Fusce sed sem sed quam eleifend commodo id eget lorem. Nullam tristique tellus ac sapien ultrices, porttitor volutpat est consequat. </p>
                    </div>
                    <div class="buy-item">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                   <div class="buy-item">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                   <div class="buy-item">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">Nullam id justo congue, luctus nulla a, tempus sapien. Cras ante felis, fringilla at interdum nec, euismod nec ante. In hac habitasse platea dictumst. Donec non tortor quis diam convallis aliquet. Proin feugiat, nisi id accumsan feugiat, libero neque porttitor sapien, sed porta nunc purus vel nibh. Donec in est enim. In ac mauris ligula. Morbi urna nunc, malesuada quis interdum nec, congue non turpis. Nam tincidunt nibh diam, quis vulputate mi bibendum eget. Duis eu finibus nibh. Praesent placerat ut nunc id rutrum. Vestibulum at bibendum eros. Morbi tellus turpis, accumsan a facilisis at, accumsan vitae nulla. Aliquam malesuada placerat consectetur.</p>
                    </div>
                   <div class="buy-item">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                </div>
            </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

＆＃13;
＆＃13; 
  /*.buy-one {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }*/

    .buy-text {
        display: inline-block;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
    }

    .buy-img {
        display: inline-block;
        vertical-align: middle;
    }
＆＃13; 
<html xmlns="http://www.w3.org/1999/xhtml">



<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <div class="buy">
                <div class="buy-one" style="display:block;">
                    <div style="display: block; float:left; width:300px;">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                    <div style="display: block;">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                   <div style="display: block;">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                </div>
            </div

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

尝试删除买入的css类：

＆＃13;
＆＃13; 
  /*.buy-one {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }*/

    .buy-text {
        display: inline-block;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
    }

    .buy-img {
        display: inline-block;
        vertical-align: middle;
    }
＆＃13; 
<html xmlns="http://www.w3.org/1999/xhtml">



<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <div class="buy">
                <div class="buy-one" style="display:block;">
                    <div style="display: block; clear: both;">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                    <div style="display: block; clear: both;">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                   <div style="display: block; clear: both;">
                        <img class="buy-img" src="" alt="zdjecie">
                        <p class="buy-text">xyz.</p>
                    </div>
                </div>
            </div>

</body>
</html>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：-1)

在这里，您将获得示例，您可以抓住任何适合您的人。
http://getbootstrap.com/docs/4.0/examples/

相关问题
最新问题