问题描述
我现在有一个三列布局,暂且以左侧A、中间B和右侧C三个区间来表示。现有要求如下:
A的宽度固定,为150px
C的宽度根据内容自动撑开,也就是刚好包裹住其内容, 右侧有15px的留白。
B的宽度自适应,文字内容居中
演示效果请猛戳点击预览
解决思路
利用CSS3的flex布局可以解决该问题,但是由于要支持IE8+, 所以这种方法不太合适
利用圣杯布局或者淘宝UED提供的双飞翼布局,但是由于双飞翼布局针对固定宽度和或者流体宽度(百分比), 视乎不太适合现在的C宽度自动适应的问题。
利用display:table, 可以支持IE8+, 和思路2一样,C的宽度不是刚好包裹住的
不知道各位有没有什么更好的方法,我的测试代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>双飞翼布局,支持IE5.5+</p>
<div style="
overflow: hidden;
">
<div style="
width: 100%;
text-align:center;
vertical-align:middle;
float: left;
background: pink;
padding-bottom: 5000px; margin-bottom: -5000px;
">
<div style="
margin: 0 20% 0 20%;padding:10px;
">Main
<p>dddd</p>
</div>
</div>
<div style="
float: left;
background: green;
margin-left: -100%;
width: 20%;
padding-bottom: 5000px; margin-bottom: -5000px;
">left</div>
<div style="
width: 20%;
background: red;
margin-left: -20%;
float: left;
padding-bottom: 5000px; margin-bottom: -5000px;
">right</div>
</div>
<p>display:table布局,支持IE8+</p>
<hr />
<style>
.extFooterSection {
display: table;
width: auto;
}
#systemBrandLogo,
.eventLinks,
#socialLanyon {
display: table-cell;
}
.extFooter-wrapper {
display: table-row;
}
#systemBrandLogo {
width: 150px;
background: pink;
vertical-align: middle;
padding-left: 20px;
padding-right: 20px;
}
#systemBrandLogo img {
width: 150px;
}
.eventLinks {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
background: lightgreen;
vertical-align: middle;
text-align: center;
}
.eventLinks li {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
#socialLanyon {
background: lightblue;
vertical-align: middle;
max-width: 390px;
}
#socialLanyon a {
background: url(https://qa.activestatic.net/images/logos/standardFooterLogosLanyon.png) no-repeat;
height: 33px;
width: 33px;
text-indent: -5000px;
display: block;
float: left;
margin: 0 5px;
}
#socialLanyon .social1 {
background-position: 0 -330px;
}
#socialLanyon .social2 {
background-position: 0 -198px;
}
#socialLanyon .social3 {
background-position: 0 -264px;
}
a {
text-decoration: none;
}
#socialText,
#socialIcons {
display: inline-block;
}
#socialIcons {
vertical-align: middle;
}
</style>
<div class="extFooterSection">
<div class='extFooter-wrapper'>
<div id="systemBrandLogo">
<a href="http://lanyon.com/solutions/regonline?utm_source=referral&utm_medium=app&utm_campaign=viral_regonline&utm_content=footer_mktg" class="brandLogo" target="_blank" title="Lanyon.com">
<img class="brandLogo mobileVisible" src="https://qa.activestatic.net/images/logos/headerlogo_RegOnline.png">
</a>
</div>
<ul class="eventLinks">
<li><a class="modalDialog ready" href="">Event Contact Information</a>
</li>
</ul>
<div id="socialLanyon">
<div style='min-width:390px;'>
<div id="socialText">Tell others about this event:</div>
<div id="socialIcons"><a class="social1" href="">Share on Facebook</a><a class="social2" href="" target="_blank" title="Tweet this on Twitter">Tweet this on Twitter</a><a class="social3" href="" title="Update your LinkedIn Network">Update your LinkedIn Network</a>
</div>
</div>
</div>
</div>
</div>
<hr />
<!--
.hideText{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
-->
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。
可以利用创建了新的BFC的元素不会和浮动元素重叠来做。简单来说,左侧左浮动,右侧右浮动,中间是创建了新的BFC的元素即可。示例代码:
<style>
.co
.left {background:red;width:150px;float:left;}
.right {background:blue;margin-right:15px;float:right;}
.center {background:green;overflow:hidden;text-align:center;}
</style>
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>