css3 - 对齐网格中的对象

-1

大家好！我在这里面临一些挑战。基本上，我有这种情况...css3 - 对齐网格中的对象

固定宽度的侧栏
容器具有固定的宽度和高度，其中在一排集装箱的号码必须与屏幕上的可用宽度可根据
另一个div容器，其中宽度总是必须匹配容器的宽度在一个单一的增长（这是挑战本身） - 看到图片，并注意到灰色的点。
当我调整屏幕，当空间不够

我做了很多的尝试，使绿盒子获得与蓝装对准容器必须换行。另外我不确定这是否是最好的做法。我创建了#group div，期望自动使顶部对齐。此外容器的底部和右边看起来像一个网格，所以我不知道这是否是最好的方式来执行此操作 - 我试着说：我们可以改变任何东西，除了：主div必须存在，侧酒吧必须存在，固定宽度的东西必须保持固定宽度。

下面是代码，但你可以看到它运行在plunker

<html lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Test</title> 
<style> 
    body, 
    html { 
     width: 100%; 
     height: 100%; 
     background-color: black; 
     margin: 0; 
    } 

    #app { 
     width: 100%; 
    } 

    #sideBar { 
     background-color:red; 
     width: 300px; 
     float: left; 
     height: 2000px; 
    } 

    #master { 
     padding: 10px; 
     margin-left: 300px; 
    } 

    #group { 

    } 

    #topper { 
     height: 30px; 
     background-color: green; 
     margin-bottom: 20px; 
     width: inherit; 
    } 

    .containers { 
     background-color: blue; 
     width: 300px; 
     height: 300px; 
     margin-right: 20px; 
     margin-bottom: 20px; 
     float: left; 
    } 
</style> 
</head> 

<body> 
<div id="app"> 
    <div id="sideBar"></div> 
    <div id="master"> 
     <div id="group"> 
      <div id="topper"></div> 
      <div class="containers"></div> 
      <div class="containers"></div> 
      <div class="containers"></div> 
      <div class="containers"></div> 
      <div class="containers"></div> 
      <div class="containers"></div> 
      <div class="containers"></div> 
      <div class="containers"></div> 
      <div class="containers"></div> 
      <div class="containers"></div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

调整的另一种情形：最重要的是：集装箱始终是固定的宽度，显示许多可能在一个行和最重要的是：绿色的div总是与容器的下方对齐。

来源

2016-03-12 Marco Jr

几乎有:(但容器不能改变的宽度/高度...必须是固定的。当我调整窗口，容器必须换行到行波纹管，例如：如果我使用的是4K液晶显示器，单排可容纳7个集装箱，在1024个液晶显示器，2个液晶显示器，1440个液晶显示器，3个液晶显示器......换句话说：容器的宽度必须固定像素 –

如果我没有得到它，这是你（假设您可以通过设置calc的蓝色框的宽度和高度）后在做什么。

flexbox和calc在这里很方便，因为他们可以做的辛勤工作。我已将.right-container上的max-width设置为75％，以显示它正在执行的操作。

您可以将蓝色框的width设置为50％，但您需要将padding-bottom更改为50％。。

body { 
 
    background: black; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.left-container { 
 
    background: red; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100px; 
 
    height: 100%; 
 
} 
 

 
.right-container { 
 
    margin-left: 120px; 
 
    max-width: 70%; 
 
    width: auto; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
} 
 

 
.top-box { 
 
    width: 100%; 
 
    background: lime; 
 
    height: 50px; 
 
} 
 

 
.list-boxes { 
 
    list-style: none; 
 
    margin: 10px -10px; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: stretch; 
 
} 
 

 
.box-item { 
 
    background: blue; 
 
    flex-basis: calc(100% /3); 
 
    padding-bottom: calc(100%/3); 
 
    border: 10px solid black; 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 

 
    <div class="left-container"> 
 

 
    </div> 
 

 
    <div class="right-container"> 
 

 
    <div class="top-box"> 
 

 
    </div> 
 

 
    <ul class="list-boxes"> 
 
     <li class="box-item"> 
 
     <div class="box"> 
 

 
     </div> 
 
     </li> 
 
     <li class="box-item"> 
 
     <div class="box"> 
 

 
     </div> 
 
     </li> 
 
     <li class="box-item"> 
 
     <div class="box"> 
 

 
     </div> 
 
     </li> 
 
     <li class="box-item"> 
 
     <div class="box"> 
 

 
     </div> 
 
     </li> 
 
     <li class="box-item"> 
 
     <div class="box"> 
 

 
     </div> 
 
     </li> 
 

 
    </ul> 
 

 
    </div> 
 

 
</div>

来源

2016-03-12 11:24:28 Roy

我更新了我的问题以揭示一个更好的场景，容器必须是固定的宽度/高度，绿色的div宽度必须“跟随”，根据容器呈现在单一行中 –

@ MarcoS.Junior就像它在我的例如... – Roy

不，罗伊..在你的例子中，集装箱按比例调整大小。它必须遵守300px x 300px。当窗口调整大小时，容器必须包装到行下方。这可能是我的错，不能够更好地解释:(为此感到遗憾，试图尽我所能。检查图片1和图片2 - 图片1中有2个容器，就像一个1024像素的窗口。 pic2在一个或多或少1400px的窗口中有3个容器。在一个4k的窗口中，我可以在一行中放置大约7个容器。总是300x300 –

css3 - 对齐网格中的对象

回答

相关问题