浮动图像溢出父div

Question

我尝试float:right;段<p>旁边的<div>图像，它们嵌套在<div>容器中。问题是，父height使用段落中文本的大小调整其<div>的大小，这是好的，但浮动的右图像会溢出div，同样image height没有根据.container { width: 70%; background-color: #777; margin: 0 auto; padding: 25px; } .content { width: 100%; height: auto; float: left; } .content .container { width: 70%; height: auto; background-color: white; /* overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container */ } .autoportrait { width: 20%; height: 20%; /* max-width:205px; max-height:265px; margin-bottom: 25px; */ padding: 10px 10px 10px 10px; border: solid; border-width: 2px; float: right; clear: both; }调整自己的大小。

＆＃13;

＆＃13;

<div class="content">
  <div class="container">
    <!--
    <main>
    <section>
    -->
    <img class="autoportrait" src="autoportrait.jpg" alt="Autoportrait of me">
    <h2>Post title</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
      Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
      mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
      nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
    </p>
    <!--
    </section>
    </main>
    -->
  </div>
</div>

＆＃13;

overflow: hidden;

＆＃13;

＆＃13;

＆＃13;

我尝试使用public DbSet<Candidate> Candidates { get; set; } public DbSet<SkillSet> SkillSets { get; set; } protected override void OnModelCreating(DbModelBuilder modelBuilder) { modelBuilder.Entity<Candidate>().HasMany(t => t.SkillSets).WithMany(t => t.Candidates) .Map(m => { m.ToTable("candidate_skillset"); m.MapLeftKey("candidate_id"); m.MapRightKey("skillset_id"); }); modelBuilder.Entity<SkillSet>().ToTable("skillset"); modelBuilder.Entity<Candidate>().ToTable("candidate"); } ，但这只适用于单个＆＃34;帖子＆＃34;。当我尝试放置第二个时，会出现同样的问题，并且从“内容容器”流出的图像的长度会出现问题。双打。    我是HTML / CSS的新手以及我为自己的知识编写的代码。如果我们弄明白的话，我会感激不尽。

来自保加利亚瓦尔纳的问候！

Answer 1

使用$(document).on('click', '.js.swatch.container', function () { var $temp = $("<textarea>"); $("body").append($temp); $temp.val($(this).text()).select(); var coppied = document.execCommand("copy"); $temp.remove(); }); 伪类使div清除它的子项。

:after

.container{
    width: 70%;
    background-color: #777;
    margin: 0 auto;
    padding: 25px;
    border:1px solid red;
}

.content{
    width: 100%;
    height: auto;
    float: left;
}

.content .container {
    width: 70%;
    height: auto;
    background-color: white;
    /*overflow: hidden; /* Try later without overflow. (autoportrait.jpg overflow .content .container) */
}

.autoportrait{
    width: 20%;
    height: 20%;
    /*max-width:205px;
    max-height:265px;
    margin-bottom: 25px;*/
    padding: 10px 10px 10px 10px; 
    border: solid;
    border-width: 2px;
    float: right;
    clear:both;
}

.container:after {
     visibility: hidden;
     display:table;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }

Answer 2

最简单的解决方案是在overflow: hidden;上使用.content .container。

我知道你曾说过你曾尝试过它，甚至在.content .container中对它进行了评论，但这对我有用。也许问题在于您将第二篇文章放在标记中的位置/方式。

＆＃13;

＆＃13;

.container {
  width: 70%;
  background-color: #777;
  margin: 0 auto;
  padding: 25px;
}
.content {
  width: 100%;
  height: auto;
  float: left;
}
.content .container {
  width: 70%;
  height: auto;
  background-color: white;
  overflow: hidden;
  border: 1px solid #ccc;
}
.autoportrait {
  width: 20%;
  height: 20%;
  /*
  max-width:205px;
  max-height:265px;
  margin-bottom: 25px;
  */
  padding: 10px 10px 10px 10px;
  border: solid;
  border-width: 2px;
  float: right;
  clear: both;
}

＆＃13;

<div class="content">
  <div class="container">
    <img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
    <h2>Post title</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
      Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
      mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
      nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
    </p>
  </div>

  <div class="container">
    <img class="autoportrait" src="http://placehold.it/300x500/fc0/" alt="Autoportrait of me">
    <h2>Post title</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu purus et enim eleifend fringilla. Cras nec tortor elementum, vestibulum orci id, congue nisl. Fusce ornare ac turpis sit amet tincidunt. Phasellus vel magna ut massa tempus ultricies.
      Etiam erat libero, molestie vitae scelerisque quis, consequat eget lorem. Nulla finibus felis non mi viverra efficitur. Proin eget lobortis libero. Fusce aliquam eros sed placerat viverra. Nulla venenatis, nulla sit amet suscipit vulputate, sem
      mauris rutrum erat, id pharetra dui nunc at dui. Morbi dignissim luctus maximus. Cras vitae ornare risus. Sed accumsan vitae eros ac placerat. Proin commodo non orci nec consectetur. Nunc posuere, enim a lobortis ultrices, augue ex ultrices ante,
      nec consectetur elit leo a ligula. Mauris pellentesque massa nisl, non pellentesque ex pulvinar eu.
    </p>
    <!--
    </section>
    </main>
    -->
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;