Html 将 div 移动到新行

Move div to new line

提问by Lucas

I'm pretty new to CSS and it is still magic for me.
I want to have my div movie_item_content_ploton a new line. Currently I use <br>in HTML and this works fine. When I replace the <br>with clear: both;the div appears between movie_item_posterand movie_item_toolbar- but this is not what I want to have. It should be in movie_item_contentbut under movie_item_yearand movie_item_plot.

我对 CSS 还是很陌生，它对我来说仍然很神奇。
我想将我的 divmovie_item_content_plot放在一个新行上。目前我<br>在 HTML 中使用，这很好用。当我更换<br>用clear: both;的DIV出现movie_item_poster和movie_item_toolbar-但这不是我想要拥有的。它应该在movie_item_content但在movie_item_year和之下movie_item_plot。

Hereis a fiddle to play around with.

这是一个可以玩的小提琴。

wanted layout (<br>)

想要的布局 ( <br>)

wrong layout (clear: both;)

错误的布局 ( clear: both;)

HTML

HTML

<div id="movie_item">
    <div class="movie_item_poster">
        <img src="..." style="max-width: 100%; max-height: 100%;">
    </div>

     <div id="movie_item_content">
        <div class="movie_item_content_title">title</div>
        <div class="movie_item_content_year">year</div>
        <br> <!-- I want to replace this br -->
        <div class="movie_item_content_plot">plot</div>
    </div>

    <div class="movie_item_toolbar">
        Lorem Ipsum...
    </div>
</div>

CSS

CSS

#movie_item {
    display: block;
    margin-top: 10px;
    height: 175px;
}

.movie_item_poster {
    float: left;
    height: 150px;
    width: 100px;
}

.movie_item_content {
    float: right;
}

.movie_item_content_title {
    float: left;
}

.movie_item_content_year {
    float: right;
}

.movie_item_content_plot {

}

.movie_item_toolbar {
    clear: both;
    vertical-align: bottom;
    width: 100%;
    height: 25px;
}

采纳答案by god_is_love

What about something like this.

这样的事情怎么办。

<div id="movie_item">
    <div class="movie_item_poster">
        <img src="..." style="max-width: 100%; max-height: 100%;">
    </div>

     <div id="movie_item_content">
        <div class="movie_item_content_year">year</div>
        <div class="movie_item_content_title">title</div>
        <div class="movie_item_content_plot">plot</div>
    </div>

    <div class="movie_item_toolbar">
        Lorem Ipsum...
    </div>
</div>

You don't have to float both movie_item_posterAND movie_item_content. Just float one of them...

您不必同时浮动movie_item_posterAND movie_item_content。只需漂浮其中一个...

#movie_item {
    position: relative;
    margin-top: 10px;
    height: 175px;
}

.movie_item_poster {
    float: left;
    height: 150px;
    width: 100px;
}

.movie_item_content {
    position: relative;
}

.movie_item_content_title {
}

.movie_item_content_year {
    float: right;
}

.movie_item_content_plot {
}

.movie_item_toolbar {
    clear: both;
    vertical-align: bottom;
    width: 100%;
    height: 25px;
}

Here it is as a JSFiddle.

这是一个 JSFiddle。

回答by michel

Try this

尝试这个

#movie_item {
    display: block;
    margin-top: 10px;
    height: 175px;
}

.movie_item_poster {
    float: left;
    height: 150px;
    width: 100px;
    background: red;
}

#movie_item_content {
    float: left;
    background: gold;
}

.movie_item_content_title {
    display: block;
}

.movie_item_content_year {
    float: right;
}

.movie_item_content_plot {
    display: block;

}

.movie_item_toolbar {
    clear: both;
    vertical-align: bottom;
    width: 100%;
    height: 25px;
}

In Html

在 HTML 中

<div id="movie_item">
    <div class="movie_item_poster">
        <img src="..." style="max-width: 100%; max-height: 100%;">
    </div>

     <div id="movie_item_content">
            <div class="movie_item_content_year">(1890-)</div>
        <div class="movie_item_content_title">title my film is a long word</div>
        <div class="movie_item_content_plot">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, ratione, aliquam, earum, quibusdam libero rerum iusto exercitationem reiciendis illo corporis nulla ducimus suscipit nisi dolore explicabo. Accusantium porro reprehenderit ad!</div>
    </div>

    <div class="movie_item_toolbar">
        Lorem Ipsum...
    </div>
</div>

I change position div year.

我改变位置div年。