Question

如何制作带有此HTML元素排序的侧边栏以及附加图像的纯CSS？

HTML：

 <div id="main">
       <div id="One"></div>
       <div id="Two"></div>
       <div id="Three"></div>
    </div>

期望的观点：

但它是这样的：

我在float＆amp; clear＆amp; display财产但不起作用。＃One，＃Two和#Three有一个同一个父母（他们是兄弟姐妹），我不想使用绝对或固定的位置。

Answer 1

你走了 HTML：

lastday = new Date(yr, monthh, 0);

frmdt = yr + "-" + frmmnth.substring(0,2) + "-01";
todt= yr + "-" + monthh + "-" + lastday.getDate();

CSS：

<div id="main"> 
   <div id="one" class="right-side">
     <p>
     one
     </p>
   </div>
   <div id="two" class="right-side">
     <p>
     Two
     </p>
   </div>
   </div>
   <div id="three">
     <p>
     Three
     </p>
   </div>

DEMO：https://jsfiddle.net/Lt8ovoqw/2/

Answer 2

我强烈建议您将这样的内容添加到默认的css文件中：

* {
  box-sizing: border-box;
}

*:before,
*:after {
  box-sizing: border-box;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.row:before,
.row:after,
.clearfix:before,
.clearfix:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after {
  content: " ";
  display: table;
}

.row:after,
.clearfix:after,
.container:after,
.container-fluid:after {
  clear: both;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

[class*="col-"] {
  position: relative;
  float: left;
  min-height: 1px;
  width: 100%;
}

.col-xs-12 {width: 100%;}
.col-xs-11 {width: 91.66666667%;}
.col-xs-10 {width: 83.33333333%;}
.col-xs-9 {width: 75%;}
.col-xs-8 {width: 66.66666667%;}
.col-xs-7 {width: 58.33333333%;}
.col-xs-6 {width: 50%;}
.col-xs-5 {width: 41.66666667%;}
.col-xs-4 {width: 33.33333333%;}
.col-xs-3 {width: 25%;}
.col-xs-2 {width: 16.66666667%;}
.col-xs-1 {width: 8.33333333%;}
.col-xs-offset-12 {margin-left: 100%;}
.col-xs-offset-11 {margin-left: 91.66666667%;}
.col-xs-offset-10 {margin-left: 83.33333333%;}
.col-xs-offset-9 {margin-left: 75%;}
.col-xs-offset-8 {margin-left: 66.66666667%;}
.col-xs-offset-7 {margin-left: 58.33333333%;}
.col-xs-offset-6 {margin-left: 50%;}
.col-xs-offset-5 {margin-left: 41.66666667%;}
.col-xs-offset-4 {margin-left: 33.33333333%;}
.col-xs-offset-3 {margin-left: 25%;}
.col-xs-offset-2 {margin-left: 16.66666667%;}
.col-xs-offset-1 {margin-left: 8.33333333%;}

@media only screen and (min-width: 768px) {
  .col-sm-12 {width: 100%;}
  .col-sm-11 {width: 91.66666667%;}
  .col-sm-10 {width: 83.33333333%;}
  .col-sm-9 {width: 75%;}
  .col-sm-8 {width: 66.66666667%;}
  .col-sm-7 {width: 58.33333333%;}
  .col-sm-6 {width: 50%;}
  .col-sm-5 {width: 41.66666667%;}
  .col-sm-4 {width: 33.33333333%;}
  .col-sm-3 {width: 25%;}
  .col-sm-2 {width: 16.66666667%;}
  .col-sm-1 {width: 8.33333333%;}
  .col-sm-offset-12 {margin-left: 100%;}
  .col-sm-offset-11 {margin-left: 91.66666667%;}
  .col-sm-offset-10 {margin-left: 83.33333333%;}
  .col-sm-offset-9 {margin-left: 75%;}
  .col-sm-offset-8 {margin-left: 66.66666667%;}
  .col-sm-offset-7 {margin-left: 58.33333333%;}
  .col-sm-offset-6 {margin-left: 50%;}
  .col-sm-offset-5 {margin-left: 41.66666667%;}
  .col-sm-offset-4 {margin-left: 33.33333333%;}
  .col-sm-offset-3 {margin-left: 25%;}
  .col-sm-offset-2 {margin-left: 16.66666667%;}
  .col-sm-offset-1 {margin-left: 8.33333333%;}
}

@media only screen and (min-width: 992px) {
  .col-md-12 {width: 100%;}
  .col-md-11 {width: 91.66666667%;}
  .col-md-10 {width: 83.33333333%;}
  .col-md-9 {width: 75%;}
  .col-md-8 {width: 66.66666667%;}
  .col-md-7 {width: 58.33333333%;}
  .col-md-6 {width: 50%;}
  .col-md-5 {width: 41.66666667%;}
  .col-md-4 {width: 33.33333333%;}
  .col-md-3 {width: 25%;}
  .col-md-2 {width: 16.66666667%;}
  .col-md-1 {width: 8.33333333%;}
  .col-md-offset-12 {margin-left: 100%;}
  .col-md-offset-11 {margin-left: 91.66666667%;}
  .col-md-offset-10 {margin-left: 83.33333333%;}
  .col-md-offset-9 {margin-left: 75%;}
  .col-md-offset-8 {margin-left: 66.66666667%;}
  .col-md-offset-7 {margin-left: 58.33333333%;}
  .col-md-offset-6 {margin-left: 50%;}
  .col-md-offset-5 {margin-left: 41.66666667%;}
  .col-md-offset-4 {margin-left: 33.33333333%;}
  .col-md-offset-3 {margin-left: 25%;}
  .col-md-offset-2 {margin-left: 16.66666667%;}
  .col-md-offset-1 {margin-left: 8.33333333%;}
}

@media (min-width: 1200px) {
  .col-lg-12 {width: 100%;}
  .col-lg-11 {width: 91.66666667%;}
  .col-lg-10 {width: 83.33333333%;}
  .col-lg-9 {width: 75%;}
  .col-lg-8 {width: 66.66666667%;}
  .col-lg-7 {width: 58.33333333%;}
  .col-lg-6 {width: 50%;}
  .col-lg-5 {width: 41.66666667%;}
  .col-lg-4 {width: 33.33333333%;}
  .col-lg-3 {width: 25%;}
  .col-lg-2 {width: 16.66666667%;}
  .col-lg-1 {width: 8.33333333%;}
  .col-lg-offset-12 {margin-left: 100%;}
  .col-lg-offset-11 {margin-left: 91.66666667%;}
  .col-lg-offset-10 {margin-left: 83.33333333%;}
  .col-lg-offset-9 {margin-left: 75%;}
  .col-lg-offset-8 {margin-left: 66.66666667%;}
  .col-lg-offset-7 {margin-left: 58.33333333%;}
  .col-lg-offset-6 {margin-left: 50%;}
  .col-lg-offset-5 {margin-left: 41.66666667%;}
  .col-lg-offset-4 {margin-left: 33.33333333%;}
  .col-lg-offset-3 {margin-left: 25%;}
  .col-lg-offset-2 {margin-left: 16.66666667%;}
  .col-lg-offset-1 {margin-left: 8.33333333%;}
}

这样可以设置它，以便您可以使用可以响应媒体大小的基本12列网格系统。这就是Bootstrap的工作方式。这样，您只需将几个类应用于html即可完成所需的布局。像这样：

<div class="row">
  <div class="col-xs-4" id="three"></div>
  <div class="col-xs-8" id="two"></div>
  <div class="col-xs-8" id="one"></div>
</div>

然后你可以添加一些id特定的样式：

 #one, #two, #three {
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}

#one, #two {
  height: 50vh;
}

#three {
  height: 100vh;
}

Here是一个展示我正在谈论的内容的小伙伴。

同样，您不必完全使用此方法，但我发现使用这样的css网格系统非常有用。如果你使用google css网格，你会发现其他一些方法。

编辑：

好的，如果您必须维护div顺序，那么您可以这样做。

HTML：

<div id="main">
  <div id="One">
    One
  </div>
  <div id="Two">
    Two
  </div>
  <div id="Three">
    Three
  </div>
</div>

的CSS：

* {
  box-sizing: border-box;
}

#main:before,
#main:after {
  content:'';
  display: table;
}

#main:after {
  clear:both;
}

#One, #Two, #Three {
  background-color: #000;
  color: #fff;
  border: 1px solid #fff;
}

#Three {
  height: 100vh;
  width: 20%
}

#One, #Two {
  height: 50vh;
  width: 80%;
  float: right;
}

fiddle。

当然，您可以使用#One和#Two的高度，边距等来达到您想要的美感。

Answer 3

侧栏代码#Three和#One

<div class="wrapper">
    <div class="content">
        <div class="left-sidebar">
            <ul class="sidebar-menu">
                #THREE                  
            </ul>
        </div>
       <div class="right-main-content">
           #ONE
    </div>
</div>

.wrapper {width:100%;height:100%;}
.content{padding-top:20px;}
.left-sidebar {width:120px;height:200px;margin:0 0 0 0;border:1px solid red;float:left;}
.right-main-content{margin:0 60px 0 140px;border: 1px solid green;}
.right-other-content{margin:0 60px 0 140px;border: 1px solid green; padding-top:20px;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

用css制作侧边栏

3 个答案: