Question

如何制作如下设计，请考虑破折号是

-----------                              -----------
-----------                              -----------
   -----------                        ------------
   -----------                        ------------
      -----------                 ------------
      -----------                 ------------
         ----------------------------------
         ----------------------------------

Answer 1

您可以将float用于内部div，使用max-width用于包含它们的行

HTML：

<div class="row">
    <div class="int int1">
      <div class="left">some text</div>
      <div class="right">some text</div>
    </div>
 </div>
 <div class="row">
    <div class="int int2">
      <div class="left">some text</div>
      <div class="right">some text</div>
    </div>
 </div>
 <div class="row">
    <div class="int int3">
      <div class="left">some text</div>
      <div class="right">some text</div>
    </div>
 </div>
 <div class="row">
    <div class="int int4">
      <div class="left">some text</div>
      <div class="right">some text</div>
    </div>
 </div>
 <div class="row">
    <div class="int int5">
      <div class="left">some text</div>
      <div class="right">some text</div>
    </div>
 </div>
 <div class="row">
    <div class="int int6">
      <div class="left">some text</div>
      <div class="right">some text</div>
    </div>
 </div>

的CSS：

.left {
  float: left;
}
.right {
  float: right;
}
.row, .int {
  width: 100%;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
}
.int2 {
  max-width: 90%;
}
.int3 {
  max-width: 80%;
}
.int4 {
  max-width: 70%;
}
.int5 {
  max-width: 60%;
}
.int6 {
  width: auto;
}

这里是小提琴https://jsfiddle.net/bya6p2oz/

Answer 2

这是答案！

.clear{
  clear:both;height:0px;line-height:0px;overflow:hidden
  }
.container{width:100%}
.row{width:100%;margin-bottom:5px}
.div{
  width:100px;
  height:5px;
  background:blue;
  
}
.container div:nth-child(2n){float:right}
.container div:nth-child(2n-1){float:left}

.div3{float:left;margin-left:10%}
.div4{float:right;margin-right:10%}
.div5{float:left;margin-left:15%}
.div6{float:right;margin-right:15%}
.div7{float:left;margin-left:20%}
.div8{float:right;margin-right:20%}
.div9{float:left;margin-left:25%}
.div10{float:right;margin-right:25%}
.div11{width:100%;margin:5px 0}
.div12{width:100%;margin:5px 0}

<div class="container">
  <div class="row">
    <div class="div1 div"></div><div class="div2 div"></div>
    <div class=clear></div>
  </div>
  
  <div class="row">
    <div class="div3 div"></div><div class="div4 div"></div>
    <div class=clear></div>
  </div>
  
  <div class="row">
    <div class="div5 div"></div><div class="div6 div"></div>
    <div class=clear></div>
  </div>
  
  <div class="row">
    <div class="div7 div"></div><div class="div8 div"></div>
    <div class=clear></div>
  </div>
  
  <div class="row">
    <div class="div9 div"></div><div class="div10 div"></div>
    <div class=clear></div>
  </div>
  <div class="row">
    <div class="div11 div"></div><div class="div12 div"></div>
    <div class=clear></div>
  </div>
  
  
</div>

Answer 3

您可以使用flexbox：

<div class="stairs">
  <div class="set">
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="set">
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="set">
    <div class="box"></div>
    <div class="box"></div>
  </div>
   <div class="set">
    <div class="box"></div>
  </div>
</div>

CSS（Codepen中使用的SCSS）

.stairs {
  background: #333;
  max-width: 600px;
  padding: 1rem;
}

.set {
  display: flex;
  margin: 0 auto;
}
.set .box:nth-child(2) {
  margin-left: auto;
}

.set:nth-child(2) {
  max-width: 90%;
}

.set:nth-child(3) {
  max-width: 80%;
}

.set:nth-child(4) {
  max-width: 70%;
}
.set:nth-child(4) .box {
  width: 100%;
}

.box {
  width: 100px;
  background: white;
  padding: 1rem;
}

https://codepen.io/anon/pen/pwWbda

Answer 4

问题是标记为jQuery而且所有人都只回答CSS。我不得不花费几个小时来解决你的问题，但我认为这是你期待的答案这里是代码和我做的JSFiddle：

＆＃13;

$('document').ready(function() {
	function makeEqual(blocks,dash) {
  var n =blocks;
  var widthSize = dash *10;
  var i=0;
  var equal = "";
  var contentName = "";
for(i=0;i<n;i++) {
	
  if(i==(n-1)) {
			contentName='contentL'+i;
  equal = "<div id="+contentName+">"+produceDashStructure(dash*3)+"</div>"; 
  $("#main").append(equal);
  $("#"+contentName).css({marginLeft:i*widthSize , width:widthSize*3});
  	for(j=i;j>0;j--) {
    	contentName='contentR'+j;
      equal = "<div id="+contentName+">"+produceDashStructure(dash)+"</div>"; 
      $("#main").append(equal);
      $("#"+contentName).css({marginLeft:((n-j)+i+2)*widthSize , width:widthSize , bottom: (((n-j)*2))*55 , position: "relative" });
    }
  }
  	else {
    contentName='contentL'+i;
      equal = "<div id="+contentName+">"+produceDashStructure(dash)+"</div>"; 
      $("#main").append(equal);
  $("#"+contentName).css({marginLeft:i*widthSize , width:widthSize});
    }
  }
  
  }
  function produceDashStructure(dash) {  		
      var dashedStructure = "";
  		for(var i=0;i<dash;i++) {
      	  dashedStructure += "- "; 
      }
      	return dashedStructure+"<br/><br/>"+dashedStructure;
  }

  makeEqual(5,5); 
  /*makeEqual(Number of Blocks you want , Number of - you want in a block) */
})

＆＃13;

#main {
  top: 10px;
  left: 10px;
  width: 30 px;
  position: relative;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
    
</div>

＆＃13;

JSfiddle of mine

更新：更新了代码块中所有动态短划线及其中元素的代码。

如何在CSS中显示像楼梯一样的div？

4 个答案: