整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
目中有时候会遇到这个问题：一行有3个div，希望这3个div平分屏幕宽度，并且高度等于宽度。
第一个问题：平分屏幕宽度
可以对div设置百分比宽度，而不是直接用px宽度，这里用到了响应式设计的思想，可以参考这篇文章：自适应网页设计（Responsive Web Design）
第二个问题：动态设置高度和宽度一致
有两种方法，一种是用js动态设置，一种是直接用CSS设置
先看下html代码
<ul>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
</ul>
公用的CSS
ul,li{
list-style: none;
}
* {
margin: 0;
padding: 0;
outline: 0
}
body {
margin: 0;
padding: 0;
-webkit-appearance: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
}
ul{
margin:10px;
}
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
用js动态设置
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
$(window).resize(function() {
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
});
用CSS设置
.dummy {
padding-top: 100%; /* 1:1 aspect ratio */
width: 100%;
background: #333333;
}
CSS设置padding-top的原理：Use CSS to Specify the Aspect Ratio of a Fluid Element
/———————————————————
然后尝试对图片设置高度等于动态宽度
js方法很简单，跟上面的方法基本相同
<ul>
<li class="container">
<img src="images/test_1.jpg"/>
<div class="element">
some text
</div>
</li>
<li class="container">
<img src="images/test_2.jpg"/>
<div class="element">
some text
</div>
</li>
<li class="container">
<img src="images/test_3.jpg"/>
<div class="element">
some text
</div>
</li>
</ul>
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
.container img{
width: 100%;
height:100%;
}
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
$(window).resize(function() {
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
});
CSS方法
<ul>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
</ul>
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
.dummy{
padding-top: 100%; /* 1:1 aspect ratio */
width: 100%;
background:url(images/test_3.jpg) no-repeat;
-webkit-background-size: 100%;
background-size: 100%;
}
通过设置background可以实现。
div包含img的方法没有试验成功，以后继续尝试
/————————————-
还有一个问题，怎么设置div和img之间的padding，又能保证div宽度是屏幕宽度的三分之一？
学生就可以看懂的css基础知识系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
案一:
html
<ul> <li class="active"> <em></em> <p><b>参与考试《第一期模拟考试》</b></p> <p><time>3小时50分钟</time></p> </li> <li> <em></em> <p><b>学习文档《LDO电路设计规范》</b></p> <p><time>3小时50分钟</time></p> </li> <li> <em></em> <p><b>学习文档《LDO电路设计规范》</b></p> <p><time>3小时50分钟</time></p> </li> </ul>
Css:
*{margin:0;padding:0;}
ul{
margin:100px;
padding:0;
list-style: none;
}
ul li{
position:relative;
padding-left: 30px;
padding-bottom: 20px;
border-left:2px #999 solid;
}
ul li em{
position:absolute; left:-5px; top:0; width:8px;
height:8px;border-radius:8px;background:#999;
}
ul li.active em{ background: red;}
ul li p{margin:0;}
ul li time{color:#999;font-size:12px;}
实现原理:
给每一个li一个左边框,em标签使用样式写成原点,采用定位将原点定位到边框线上
方案二:
Html
<ul> <li class="active"> <img src="2.png" alt="" /> <p><b>参与考试《第一期模拟考试》</b></p> <p><time>3小时50分钟</time></p> </li> <li> <img src="1.png" alt="" /> <p><b>学习文档《LDO电路设计规范》</b></p> <p><time>3小时50分钟</time></p> </li> <li> <img src="1.png" alt="" /> <p><b>学习文档《LDO电路设计规范》</b></p> <p><time>3小时50分钟</time></p> </li> </ul>
Css
*{margin:0;padding:0;}
ul{
margin:100px;
padding:0;
list-style: none;
}
ul li{
position:relative;
padding-left: 30px;
padding-bottom: 20px;
border-left:2px #999 solid;
}
ul li img{
position:absolute;
left:-5px;
top:0;
width:10px;
height:10px;
border-radius:10px;
background:#999;
}
ul li p{margin:0;}
ul li time{color:#999;font-size:12px;}
实现原理:
给li一个左边框,同时在结构中添加img作为原点,使用定位将图片原点定位在指定位置上
来源：千锋web前端
*请认真填写需求信息，我们会在24小时内与您取得联系。
