Question

我无法想出一个简单的解释方法，所以我会用图片来做：

What I'm trying to do

到目前为止，这是一个粗略的小提琴：https://jsfiddle.net/a9gnx79h/

纯CSS解决方案更可取，但如果需要，我可以使用jQuery。

来自小提琴的代码：

HTML 的

        <div id="main_content">

                <aside id="sidebar">

                </aside>

                <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></h2>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>

                <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. 
                An sed accumsan convenire, movet nemore ut his.</p>

                <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>



                <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></h2>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>

                <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. 
                An sed accumsan convenire, movet nemore ut his.</p>

                <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>



                <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></h2>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>

                <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. 
                An sed accumsan convenire, movet nemore ut his.</p>

                <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>



                <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></h2>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>

                <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum. Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy officiis complectitur ei pro. 
                An sed accumsan convenire, movet nemore ut his.</p>

                <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam vel ex. Tantas lucilius antiopam sit et.</p>

                <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in sanctus verterem. 
                Et propriae inimicus deseruisse sed. Ius nulla mandamus definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et omnesque fabellas concludaturque vel.</p>

        </div>

CSS

#main_content
{
    background-color: rgba(30, 30, 30, 1);

    color: rgba(200,200,200,1);

    width: 95%;
    min-height: 50rem;

    border-width: 10%;

    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;

    padding: 1rem;
}

#sidebar
{
    float: right;

    padding: 1.5rem;

    margin-right: 1rem;

    background-color: rgba(255, 0, 0, 1);

    display: inline;

    width: 10%;
    height: 30rem;
}

.title
{
    background-color: rgba(0, 00, 255, 1);

    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 1rem;
    padding-left: 1rem;

    font-weight: bold;

    display: block;

    position: relative;
}

.title span
{
    float: right;
    font-size: 50%;
    font-weight: normal;
}

Answer 1

在下面添加到样式表中，根据需要调整边距。

#sidebar {
    margin: 1rem;
}
.title {
    overflow: atuo;
}

更新演示： http://jsfiddle.net/a9gnx79h/26/

Answer 2

尝试下面的代码段。

您可以使用文章类将每篇文章包装在div中，然后为顶级文章创建另一个更具体的文章类（我狡猾地称之为top-article。

#main_content {
    background-color:rgba(30,30,30,1);
    color:rgba(200,200,200,1);
    width:95%;
    min-height:50rem;
    border-width:10%;
    margin-top:3rem;
    margin-left:auto;
    margin-right:auto;
    padding:1rem
}

#sidebar {
    float:right;
    padding:1.5rem;
    margin: 0 1rem 0 1rem;
    background-color:rgba(255,0,0,1);
    display:inline;
    width:10%;
    height:29rem
}

.top-article {
    width:75%;
    overflow:hidden
}

.article {
    width:100%;
    overflow:visible;
    margin-top: 25px;
    padding-top:15px
}

.title {
    background-color:rgba(0,00,255,1);
    margin-top:0;
    padding-top:1rem;
    padding-bottom:1rem;
    padding-right:1rem;
    padding-left:1rem;
    font-weight:700;
    display:block;
    position:relative;
    overflow: auto
}

.title span {
    float:right;
    font-size:50%;
    font-weight:400
}

<div id="main_content">
    <aside id="sidebar"></aside>
    <div class="top-article">
      <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></span></h2>

      <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi
      commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in
      sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus
      definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et
      omnesque fabellas concludaturque vel.</p>

      <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum.
      Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy
      officiis complectitur ei pro. An sed accumsan convenire, movet nemore ut his.</p>

      <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam
      vel ex. Tantas lucilius antiopam sit et.</p>

      <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi
      commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in
      sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus
      definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et
      omnesque fabellas concludaturque vel.</p>
    </div>

    <div class="article">
      <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></span></h2>

      <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi
      commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in
      sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus
      definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et
      omnesque fabellas concludaturque vel.</p>

      <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum.
      Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy
      officiis complectitur ei pro. An sed accumsan convenire, movet nemore ut his.</p>

      <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam
      vel ex. Tantas lucilius antiopam sit et.</p>

      <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi
      commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in
      sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus
      definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et
      omnesque fabellas concludaturque vel.</p>
    </div>

    <div class="article">
      <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></span></h2>

      <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi
      commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in
      sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus
      definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et
      omnesque fabellas concludaturque vel.</p>

      <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum.
      Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy
      officiis complectitur ei pro. An sed accumsan convenire, movet nemore ut his.</p>

      <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam
      vel ex. Tantas lucilius antiopam sit et.</p>

      <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi
      commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in
      sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus
      definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et
      omnesque fabellas concludaturque vel.</p>
    </div>

    <div class="article">
      <h2 class="title">Blog Post<span>posted 1/2/2015 by <a>User</a></span></h2>

      <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi
      commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in
      sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus
      definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et
      omnesque fabellas concludaturque vel.</p>

      <p>Dicunt voluptatibus definitionem mel at, eu tritani gloriatur instructior cum.
      Cum id euismod luptatum, everti saperet ei nec. Vel meis brute graeci cu, nonumy
      officiis complectitur ei pro. An sed accumsan convenire, movet nemore ut his.</p>

      <p>Sit mentitum instructior ex. Exerci ornatus cum te. Zril pertinax comprehensam
      vel ex. Tantas lucilius antiopam sit et.</p>

      <p>Lorem ipsum dolor sit amet, ex eros epicuri elaboraret mel, ridens eruditi
      commune ei vim, no est possit meliore corrumpit. Saperet fabellas mea eu, quo in
      sanctus verterem. Et propriae inimicus deseruisse sed. Ius nulla mandamus
      definitionem et, forensibus conclusionemque mel ad. Duis sonet quando et sit, et
      omnesque fabellas concludaturque vel.</p>
    </div>
  </div>

Answer 3

<div style="width:500px;">
<div style="width:100px; height:400px; float:right; border:1px solid #ccc;">&nbsp;</div>
A LOT OF TEXT
</div>

使div动态填充剩余空间

3 个答案: