修复

Question

很难弄清楚我需要使用哪些方法以避免过度延伸到右边导致向右滚动，并且小图像的高度变小。它的高度应为250px。另外，我需要在每张图片的左下角添加文字。

这是供参考的图片。 Click here

HTML

<div class="news-banner">
<h1 class="text-center header-text">News</h1>
</div>

<div class="row">
<div class="col-md-8 img-container">
    <img class="img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"> 
</div>
<div class="col-md-4 img-small">
    <img class="img-responsive" src="/assets/icons/13-Cuidados-alternativos-en-familia.jpg">
    <img class="img-responsive" src="/assets/icons/man-person-cute-young-large.jpg">
</div>

CSS

.news-banner {
height: 120px;
background: #eb1212;
position: relative;
border-bottom: 2px solid white;
}

.header-text{ 
color: white;
width: 50%;
height: 50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0; 
}

.img-container {
height: 500px;
display: flex;
}

.img-small {
height: 100%;
}

Answer 1

修复

不要真正了解Bootstrap与其他代码的副作用。但你也可以试试这个。它对Bootstrap来说很有用。

html {
   width: 100%;
   overflow-x: hidden;
}

有关工作示例，请参阅https://jsfiddle.net/bzLo33n8/。

Answer 2

两个点的解决方案

每个高度应为250px。

另外，我需要在每张图片的左下角添加文字。

使用类行将img-wrapper类添加到div，并使用一些额外的css规则，这是演示。 以Full Page模式

查看

＆＃13;

.news-banner {
  height: 120px;
  background: #eb1212;
  position: relative;
  border-bottom: 2px solid white;
}
.header-text {
  color: white;
  width: 50%;
  height: 50%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.img-container {
  height: 100%;
  display: flex;
}
.img-small {
  height: 100%;
}
.img-small div {
  height: 50%;
}
.img-small img {
  height: 100%;
}
.img-wrapper {
  height: 500px;
}
span.img-desc {
  color: white;
  bottom: 5px;
  left: 30px;
  font-size: 20px;
  position: absolute;
}
.img-wrapper.row div[class|='col-md'] {
  padding: 0px;
}
html {
  overflow-x: hidden;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="news-banner">
  <h1 class="text-center header-text">News</h1>
</div>

<div class="row img-wrapper">
  <div class="col-md-8 img-container">
    <img class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg">
    <span class="img-desc"> This Image Description </span>
  </div>
  <div class="col-md-4 img-small">
    <div class="col-md-12">
      <img class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
      <span class="img-desc"> This Image Description </span>
    </div>
    <div class="col-md-12">
      <img class="img-responsive" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg">
      <span class="img-desc"> This Image Description </span>
    </div>

  </div>
</div>

＆＃13;

Css冲突扩展宽度

2 个答案:

修复