[英]CSS centered image with dynamic left and right div with lines
我要在中间固定宽度的图像。
没问题
但我希望它旁边的左和右div为2行。
例。
我在中间有一个100px * 100px的图像,并希望2个div的宽度为50%-50px,而无需使用calc。 2格应该有一条线,这也没问题。
我只是用
{ background: white; margin-top: 48px; margin-bottom: 48px; }
现在的问题是使这2个div填充图像的左右空间。 不用说,整个屏幕的宽度是动态的。
无论如何,仅使用CSS可以做到这一点?
您可以尝试将其变形,然后将侧面的div设置为25%,将图像设置为50%。
这与值为图像宽度的50%的div相同。
的CSS
.wrapper {width: 200px;}
.left {width: 25%;}
.right {width:25%;}
.image {width: 50%;}
的HTML
<div class="wrapper">
<div class="left"></div>
<div class="image">
<img src="" />
</div>
<div class="right"></div>
</div>
这是我的解决方案,左,右div使用包装器,宽度为50%,并包含其他div,其边缘为图像宽度的一半。 使用绝对定位将图像本身定位在包装中。
的HTML
<div class="wrapper">
<div class="left"><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div></div>
<div class="right"><div>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div></div>
<img src="your_image.png" alt="" />
</div>
的CSS
.wrapper {
position: relative;
overflow: hidden;
height: auto; /* match the height of the floating divs */
}
.wrapper > div > div {
min-height: 100px; /* at least as high as the image */
}
.wrapper > .left {
float: left;
width: 50%;
}
.wrapper > .left > div {
margin-right: 50px;
background: blue;
}
.wrapper > .right {
float: right;
width: 50%;
}
.wrapper > .right > div {
margin-left: 50px;
background: red;
}
.wrapper > img {
position: absolute;
width: 100px;
height: 100px;
top: 0;
left: 50%;
margin-left: -50px;
}
这是一个JSFiddle: http : //jsfiddle.net/j84LB/
使用足够的display:table/display:table-cell
似乎很容易
无需额外的div等
的HTML
<body>
<div class="wrapper">
<div class="left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor
</div>
<div><img src="http://lorempixel.com/output/abstract-q-c-100-100-6.jpg" alt="" /></div>
<div class="right">Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
</div>
</body>
的CSS
.wrapper {
position: relative;
overflow: hidden;
height: auto;
display:table;
}
.wrapper > div {
display:table-cell;
vertical-align: middle;
padding: 1em;
}
.wrapper > div:nth-child(2) {
min-height: 100px;
width:100px;
padding:0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.