[英]Aligning side by side in a modal
HTML 的HTML
<div id="wrapper">
<div class="notes">One</div>
<div class="notes">two</div>
<div class="notes">three</div>
<div class="notes">four</div>
</div>
CSS 的CSS
#wrapper {
width: 300px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid black;
}
.notes {
color: red;
border: 1px solid green;
margin: 5px;
width: 200px;
height: 150px;
display: inline-block;
}
I have a wrapper div which has 300px width. 我有一个宽度为300px的包装div。
The inner divs are generated dynamically based on the server request and has the width of 200px each. 内部div是根据服务器请求动态生成的,每个div的宽度为200px。
Now i need to set side by side in the wrapper and when it reach 300px it needs to be displayed in a scrolled mode.. 现在,我需要在包装器中并排设置,当其达到300px时,需要以滚动模式显示。
Seems i have some issues in my code. 似乎我的代码中有一些问题。 Pls help... 请帮助...
You could give white-space: nowrap;
您可以给white-space: nowrap;
to the wrapper, then reset it to white-space: normal;
包装,然后将其重置为white-space: normal;
for each item. 对于每个项目。
#wrapper { white-space: nowrap; }
.notes { white-space: normal; }
You might also want to remove the white-space between inline block elements . 您可能还希望删除内联块元素之间的空白 。 There are several approaches to achieve that, one of them could be setting font-size: 0
to the parent, then resetting it to font-size: 16px
on the children. 有几种方法可以实现,其中一种可能是将上级font-size: 0
设置为font-size: 0
,然后在子级上将其重置为font-size: 16px
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.