Fatal编程技术网
  • css/
  • 让CSS div显示在左侧

让CSS div显示在左侧

css

让CSS div显示在左侧,css,Css,我对CSS真的很陌生，我对div有一些问题。我不太确定如何正确地表达我的问题，并且对所使用的很多术语都不熟悉，所以我很难找到问题的答案 基本上，我的目标是拥有一个容器，其中包含几个大小不同的正方形或矩形div，分别为160x160px、320x320px和160x320px，以便它们可以显示在响应网格中 我遇到的问题是，有时较大的div会“推”离它们；例如，较小的div不会显示在320x320 div类下半部分的左侧 我写的CSS是这样的 body{ max-width: 1280px;

我对CSS真的很陌生，我对div有一些问题。我不太确定如何正确地表达我的问题，并且对所使用的很多术语都不熟悉，所以我很难找到问题的答案

基本上，我的目标是拥有一个容器，其中包含几个大小不同的正方形或矩形div，分别为160x160px、320x320px和160x320px，以便它们可以显示在响应网格中

我遇到的问题是，有时较大的div会“推”离它们；例如，较小的div不会显示在320x320 div类下半部分的左侧

我写的CSS是这样的

body{
    max-width: 1280px;
    background-color: #333333;
}

div{
    border: 1px solid #333333;
    height: 158px;
    width: 158px;
    float: left;
    text-align: center;
    background-color: #cc00ff;
    display: block;
    float: left;
    vertical-align: text-bottom;
}

.extra{
    height: 158px;
    width: 318px;
    background-color: #ccff00;
}

.feature{
    height: 318px;
    width: 318px;
    background-color: orange;
}
我在下面的HTML中粘贴了这个链接，其中有大约20个div，其中一些是div的类

    <head>
        <link type="text/css" rel="stylesheet" href="new1.css"/>
    <title></title>
    </head>
    <body>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div class="feature">Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div>Article Title</div>
        <div class="extra">Article Title</div>
    </body>
</html>
如果我用了奇怪的措词，我再次表示歉意，如果您能提供任何建议或链接到可以回答我问题的适当线程，我将不胜感激。

在本例中，您得到了一些设计如何制作的提示。这不完全是你们的解决方案，但在这里你们得到了关键点

  <head>
    <title></title>
<style>
.row1
{
height:50px;
width:100px;
background-color:green;
float:left;
position:relative;
border:1px solid black;
}

</style>
    </head>
    <body>
        <div>
        <div class="row1">Article Title</div>
        <div class="row1">Article Title</div>
        <div class="row1">Article Title</div>
        <div class="row1">Article Title</div>
        <div class="row1">Article Title</div>
        <div class="row1">Article Title</div> 
        <div class="row1">Article Title</div>
        <div class="row1">Article Title</div>
        </div>
    </body>
</html>
结果：

公认的术语是“砖石布局”：它们是最流行的AFAIKAlso。添加HTML，这将有助于解决问题。嘿，谢谢你回复我。砖石建筑正是我想要达到的目标。在没有Javascript的情况下可以做到这一点吗？@Uesls不幸的是，事实并非如此。一旦CSS网格布局在浏览器中获得支持，就可以不用JavaScript了。@TylerH，谢谢。我想我会坚持使用统一div，直到我更熟悉Javascript/jQuery。