css - 如何在侧边栏上获得全宽，同时保持右列在右侧？

Question

我只想让所有东西都漂浮在右边。问题是第二个右边的 div 总是在左边的 div 的底部，如果我把高度 100% 放在左边的 div 上，那么移动版本就会很糟糕。

这是我的代码和CSS。我想保留菜单在左边，下面没有任何东西，而在右边这个 float 的“卡片”。

<div class="feed-wrapper">
    <div class="container">
        <div class="col-md-3">
            <div class="feed-left">
                <ul>
                    <li>Laracasts</li>
                    <li>Modern web</li>
                    <li>Css daily</li>
                </ul>
            </div>
        </div>
        @foreach($feeds as $feed)
            <div class="col-md-9">
                <div class="feed-card">
                    <div class="feed-card-left" style="background-image: url({{ $feed->image }})">
                        {{-- <img src="{{ $feed->image}}"> --}}
                    </div>
                    <div class="feed-card-right" >
                        <h3>{{ $feed->title }}</h3>
                        <p>{{ str_limit($feed->description, 100) }}</p>
                        <hr>
                        {{ $feed->resource }}
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>

和 CSS

.feed-wrapper {
    background: #EEF2F3;
}

.feed-left {
    margin: 20px 0;
    border-radius: 10px;
    background: white;
    display: flex;
}

.feed-left {
    padding: 10px;
}
.feed-left ul {
    list-style-type: none;
}

.feed-card {
    background: white;
    margin: 20px 0px;
    display: flex;
    border-radius: 5px;
}

.feed-card-left  {
    width: 25%;
    background-position: center;
    background-size: 350px;
    background-repeat: no-repeat;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.feed-card-right {
    margin-left: 15px;
    float: right;
}

Answer 1

也许将侧边栏放在一个包含 display:flex 的 div 中；