不能得到正确的div来扩展容器div的长度

Question

我已经玩了一段时间并且无法将正确的div扩展到标题容器的末尾。任何人都可以帮助我吗？

.rightcontent{
width:60%;

https://jsfiddle.net/7kbcnyop/4/

Answer 1

添加属性：

float:right;

到css。你的代码应该是：

＆＃13;

＆＃13;

.captioncontainer {
  width: 100%;
  height: 200px;
  background: blue;
}
.leftcontent {
  width: 40%;
  height: 200px;
  background: #33adff;
  float: left;
}
.rightcontent {
  width: 60%;
  height: 200px;
  background: #66ff99;
  float: right;
}

＆＃13;

<div class="captioncontainer">
  <div class="leftcontent">
    <h1>핫요가 효능</h1>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a libero quam. Aliquam volutpat vitae sem sed euismod. Donec a congue ipsum, id sollicitudin orci. Donec neque lectus, elementum non sem sit amet, suscipit sollicitudin quam. Fusce molestie
    dictum turpis nec posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut ex
  </div>
  <div class="rightcontent">
    Etiam venenatis lobortis felis nec euismod. Aliquam erat volutpat. Nullam faucibus elit nec maximus consectetur. Morbi interdum arcu at enim consectetur, tempor sollicitudin quam vehicula. Fusce urna lectus, dapibus maximus nulla vitae, dictum tristique
    justo. Maecenas porta elementum risus sed mollis. Sed tellus ligula, semper at odio ut, accumsan rutrum diam.

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Updated Fiddle

Answer 2

我修复了你的代码。 Click Here.

正如@Pragyakar Joshi所说，

  

为什么宽度设置为60％？是不是将其设置为100％解决问题？

这确实解决了这个问题。

看一下这个片段。

if(ChessBoard.white.containsKey(original))
    piece = ChessBoard.white.get(original);
else if(ChessBoard.black.containsKey(original))
    piece = ChessBoard.black.get(original);
else
    throw new IllegalArgumentException("Attempting to move piece from empty square " + original);

.captioncontainer {
  width: 100%;
  height: 200px;
  background: blue;
}

.leftcontent {
  width: 40%;
  height: 200px;
  background: #33adff;
  float: left;
}

.rightcontent {
  width: 100%;
  height: 200px;
  background: #66ff99;
}

修改

用<div class="captioncontainer"> <div class="leftcontent"> <h1>핫요가 효능</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a libero quam. Aliquam volutpat vitae sem sed euismod. Donec a congue ipsum, id sollicitudin orci. Donec neque lectus, elementum non sem sit amet, suscipit sollicitudin quam. Fusce molestie dictum turpis nec posuere. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut ex </div> <div class="rightcontent"> Etiam venenatis lobortis felis nec euismod. Aliquam erat volutpat. Nullam faucibus elit nec maximus consectetur. Morbi interdum arcu at enim consectetur, tempor sollicitudin quam vehicula. Fusce urna lectus, dapibus maximus nulla vitae, dictum tristique justo. Maecenas porta elementum risus sed mollis. Sed tellus ligula, semper at odio ut, accumsan rutrum diam. </div> </div>替换height: 200px;看起来更好。

height: 350px;

.captioncontainer {
  width: 100%;
  height: 200px;
  background: blue;
}

.leftcontent {
  width: 40%;
  height: 350px;
  background: #33adff;
  float: left;
}

.rightcontent {
  width: 100%;
  height: 350px;
  background: #66ff99;
}