找到你要的答案

Q:How to make all div fit into the screen without scrollbar

Q:如何使所有div适应屏幕没有滚动条

I have around 10 images aligining side by side each of size 150x150.Each image kept inside a their rspective div.The images doesnt fit the screen.I dont want them to fit to screen.After 6 images remainig 4 images come below the other 6 images.I want all of them to align horizontally and fit to scrren.Width and height of div is given same as size of image

<style>

.wrapper{

     margin-left: auto;
    margin-right: auto;
    width: 100%;
    height:100%;
    overflow:hidden;
    position:relative;

.zero
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.one
    {
    margin-left:20px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;
.two
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.three
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.four
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.five
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.six
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.seven
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.eight
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.nine
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;


</style>




<body>
<div class="wrapper">

  <div class="zero">
    <img src="images/image.png"/>

    </div>

  <div class="one">
    <img src="images/image.png"/>

    </div>

    <div class="two">
    <img src="images/image.png"/>

    </div>
<div class="three">
    <img src="images/image.png"/>

    </div>
<div class="four">
    <img src="images/image.png"/>

    </div>
<div class="five">
    <img src="images/image.png"/>

    </div>
<div class="six">
    <img src="images/image.png"/>

    </div>
<div class="seven">
    <img src="images/image.png"/>

    </div>
<div class="eight">
    <img src="images/image.png"/>

 </div>
<div class="nine">
    <img src="images/image.png"/>

    </div>
</div>
</body> 
  </html>

我有大约10的图像aligining并排每个尺寸150x150。每个图像保持在他们的有关部门的图像不适合屏幕。我不想让他们适应屏幕。6后留下4幅图像在其他6个图像。我希望所有人水平对齐和适合帘。div的宽度和高度是相同大小的图像

<style>

.wrapper{

     margin-left: auto;
    margin-right: auto;
    width: 100%;
    height:100%;
    overflow:hidden;
    position:relative;

.zero
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.one
    {
    margin-left:20px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;
.two
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.three
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.four
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.five
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.six
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.seven
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.eight
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;

.nine
    {
    margin-left:259px;
    margin-top:948px;
    width:150px;
    height:150px;
    float:left;
    display-inline:block;


</style>




<body>
<div class="wrapper">

  <div class="zero">
    <img src="images/image.png"/>

    </div>

  <div class="one">
    <img src="images/image.png"/>

    </div>

    <div class="two">
    <img src="images/image.png"/>

    </div>
<div class="three">
    <img src="images/image.png"/>

    </div>
<div class="four">
    <img src="images/image.png"/>

    </div>
<div class="five">
    <img src="images/image.png"/>

    </div>
<div class="six">
    <img src="images/image.png"/>

    </div>
<div class="seven">
    <img src="images/image.png"/>

    </div>
<div class="eight">
    <img src="images/image.png"/>

 </div>
<div class="nine">
    <img src="images/image.png"/>

    </div>
</div>
</body> 
  </html>
answer1: 回答1:

You can use flexbox to solve your problem .container {display:flex;} the children of the container will grow according to the available size example.

here you see adding more images will not create scrollbars. the default property flex-wrap is nowrap which creates the layout you want.

Keep in mind the property does not work on older IE browsers.

你可以使用flexbox来解决你的问题。容器{显示:弯曲;}容器的孩子会长大,根据现有规模的例子。

here you see adding more images will not create scrollbars. the default property flex-wrap is nowrap which creates the layout you want.

请记住,属性不适用于旧IE浏览器。

html  css