我想要的插图
我希望一些div 将相应的图像与浏览器边框对齐(在每个div 的左侧或右侧)。
有没有办法在不使用 JS 的情况下做到这一点?
至于现在,我使用图像作为容器流体的背景:
<div class="container-fluid diamondBG">
<div class="container">
<div class="row" style="text-align:center;">
<div style="display:inline-block; float:none; text-align:left;" class="col-md-9">
Some text
</div>
</div>
</div>
</div>
.CSS:
.diamondBG{
background-image: url('images/diamondLarge.png');
background-position: right;
background-repeat: no-repeat;
}
这不是解决方案,因为 bg 图像被裁剪到div 的高度。不得指定div 的高度。
解决方案是带有"位置:绝对"和"右:0"的图像或"左:0"在容器流体中:
<div class="container-fluid">
<img src="imagesdiamondLarge.png" style="position:absolute; right:0; margin-top:-60px;">
<div class="container">
<div class="row" style="text-align:center;">
<div style="display:inline-block; float:none; text-align:left;" class="col-md-9">
Some text
</div>
</div>
</div>
</div>
嘿,
我会希望它可以帮助你
<!DOCTYPE html>
<html>
<head>
<title>ayuda</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style type="text/css">
*{
padding:0 !important;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-offset-10 col-md-2">
<img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/>
</div>
<div class="col-md-2">
<img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/>
</div>
<div class="col-md-offset-10 col-md-2">
<img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/>
</div>
<div class="col-md-2">
<img src="http://urdunovels.info/wp-content/uploads/2015/03/green-city-gandhinagar-portal-bg.jpg" width="200"/>
</div>
</div>
</div>
</body>
</html>