Question

如何制作这个页脚？这个照片中的例子

Answer 1

如果必须，可以使用带有固定线条的背景图像来完成。

如果你想以正确的方式做到这一点，你肯定需要多个div来做到这一点。这是一种方式：

＆＃13;

.column{
  width:30%;
  height:100px;
  padding:1.5%;
  float:left;
  border-right:1px solid grey;
}

.column:last-child{
border-right: none;
}

.footer{
  border:1px solid grey;
  overflow:auto;
}

＆＃13;

<div class="footer">

  <div class="column" >
    blah
  </div>
  
  <div class="column" >
    blah
  </div>

  <div class="column" >
    blah
  </div>
  
</div>

＆＃13;

Answer 2

我能想到的最简单的方式。您需要自定义代码以适应您需要的响应式设计。

Jsfiddle

HTML

<div></div>
<div></div>
<div></div>

CSS

div {
  width: 200px;
  height: 100px;
  background-color: gold;
  border-left: solid 2px #cdcdcd;
  float: left;
}

Answer 3

试试这个样本：

<div style="background-color: green; width: 100%;float: right">
    <div style="width: 20% ;height: 90px; border-left: 2px solid #000;float: right">
    </div>
    <div style="width: 20% ;height: 90px; border-left: 2px solid #000;float: right">
    </div>
    <div style="width: 20% ;height: 90px; border-left: 2px solid #000;float: right">
    </div>
</div>

Answer 4

你为这三个div添加了课程。

<div class='border'>AAAA</div>
<div class='border'>BBB</div>
<div class='border'>CCC</div>

然后你添加css部分

.border{

border-left: solid 2px #cdcdcd;

}

你也安排了保证金......

Answer 5

这将解决您的问题。请尝试使用整页预览

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
 body{
  margin: 0;
  padding: 0;
 }

div.myfooter{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 300px;
  background-color:#81C41D; 
  color: white;
  font-family: monospace;
  font-size: 20px;
}

div.one{
  width:35%;
  height:100%;
  border-right: 1px solid green;
  position: absolute;
  left: 0;
  text-align: right;
}
div.two{
  width: 20%;
  height: 100%;
  border-right: 1px solid green;
  position: absolute;
  left: 35%;
  text-align: center;
}
div.three{
  width: 22.5%;
  height: 100%;
  border-right: 1px solid green;
  position: absolute;
  left: 55%;
  text-align: center;
}

div.four
{
   width: 26.5%;
  height: 100%;
  position: absolute;
  left: 72.5%;
  text-align: center;

}

</style>
<body>

<div class="myfooter">
 <div class="one"><h3>Section One</h3></div>
 <div class="two"><h3>Sectioin Two</h3></div>
 <div class="three"><h3>Section Three</h3></div>
 <div class="four"><h3>Section Four</h3></div>
</div>


</body>
</html>

＆＃13;

Answer 6

如果你可以使用css3，那么这就是你的解决方案：

HTML：

<div id="footer">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS：

#footer div { display: block; float: left; background: #eee; height: 220px; width: 33%; }
#footer div:not(:first-child) { border-left: 1px solid #ccc; }

https://jsfiddle.net/6zto4dg5/

如何在css中制作垂直线

6 个答案: