Question

我试图创建一个带圆角文字的div，其中右边包含一个图像（还有圆角）。由于此文本将连接到CMS，因此有一天内容可能会更改。这就是为什么我希望div能够响应：变得和文本一样高。并切断图像的其余部分，而不会丢失圆角或缩小图像。

我已将代码包含在下方，我真的希望有人可以帮助我！

＆＃13;

.spacing {
  padding: 15px;
}

.banners {
  display: block;
}

.banner_home {
  min-height: 100px;
  box-shadow: 5px 5px 10px #888;
  margin-top: 20px;
  padding: 0px;
  border-radius: 15px;
  display: block;
}

.banner_home_text {
  float: left;
  overflow: hidden;
}

.banner_home_text p {
  margin: 15px;
}

.banner_home .banner_home_text img {
  float: right;
  padding: 0px;
  border-radius: 0px 15px 15px 0px;
  margin-left: 10px;
  display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="banners">
  <div class="spacing">
    <div class="banner_home col-xs-12">
      <div class="banner_home_text">

        <img src="http://placehold.it/375x375" alt="Barbecue">

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac lorem eget tellus volutpat pellentesque ut eu libero. Proin et dui ut nibh laoreet varius. Praesent nec dignissim ex. Mauris pharetra convallis lacus, a rhoncus urna porttitor id. Morbi
          vel tellus id quam condimentum egestas. Phasellus elementum molestie lacus. Donec aliquam congue mollis. Sed pellentesque orci tellus, sed fringilla turpis ullamcorper dapibus.
        </p>

        <p>
          Duis commodo egestas lacus quis commodo. Duis semper dapibus mi, posuere dictum libero fermentum sed. Etiam ligula eros, ornare nec mattis at, rhoncus vel ante. Vestibulum eget finibus nisl. Nam ullamcorper scelerisque sem non sagittis. Pellentesque habitant
          morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </p>

      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

如果我上面的评论是正确的，那怎么样？图像是绝对定位的，所以它可以隐藏而不是将div推下来......

＆＃13;

.spacing {
  padding: 15px;
}

.banners {
  display: block;
}

.banner_home {
  min-height: 100px;
  box-shadow: 5px 5px 10px #888;
  margin-top: 20px;
  padding: 0px;
  border-radius: 15px;
  display: block;
}

.banner_home_text {
  float: left;
  overflow: hidden;
  position:relative;
  padding-right:375px;
}

.banner_home_text p {
  margin: 15px;
}

.banner_home .banner_home_text img {
  position:absolute;
  right:0;
  top:0;
  padding: 0px;
  border-radius: 0px 15px 15px 0px;
  margin-left: 10px;
  display: block;
  width:375px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="banners">
  <div class="spacing">
    <div class="banner_home col-xs-12">
      <div class="banner_home_text">

        <img src="http://placehold.it/375x375" alt="Barbecue">

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac lorem eget tellus volutpat pellentesque ut eu libero. Proin et dui ut nibh laoreet varius. Praesent nec dignissim ex. Mauris pharetra convallis lacus, a rhoncus urna porttitor id. Morbi
          vel tellus id quam condimentum egestas. Phasellus elementum molestie lacus. Donec aliquam congue mollis. Sed pellentesque orci tellus, sed fringilla turpis ullamcorper dapibus.
        </p>

        <p>
          Duis commodo egestas lacus quis commodo. Duis semper dapibus mi, posuere dictum libero fermentum sed. Etiam ligula eros, ornare nec mattis at, rhoncus vel ante. Vestibulum eget finibus nisl. Nam ullamcorper scelerisque sem non sagittis. Pellentesque habitant
          morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </p>

      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

  .banners {   
  box-shadow: 15px 15px 15px #888;
  margin-top: 20px;
  padding: 10px;
  border-radius: 15px;
  margin: 10px;
  overflow: auto;
}

img {
  float: right;
  width: 40%;
  border-radius: 15px 15px 15px 15px;
  padding: 10px;
  max-width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="banners">   
        <img src="http://placehold.it/375x375" alt="Barbecue" class="img-responsive">

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac lorem eget tellus volutpat pellentesque ut eu libero. Proin et dui ut nibh laoreet varius. Praesent nec dignissim ex. Mauris pharetra convallis lacus, a rhoncus urna porttitor id. Morbi
          vel tellus id quam condimentum egestas. Phasellus elementum molestie lacus. Donec aliquam congue mollis. Sed pellentesque orci tellus, sed fringilla turpis ullamcorper dapibus.
        </p>

        <p>
          Duis commodo egestas lacus quis commodo. Duis semper dapibus mi, posuere dictum libero fermentum sed. Etiam ligula eros, ornare nec mattis at, rhoncus vel ante. Vestibulum eget finibus nisl. Nam ullamcorper scelerisque sem non sagittis. Pellentesque habitant
          morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        </p>

      </div>

你需要在这里添加一个溢出黑客。

响应div削减图像

2 个答案: