JS Fiddle example

Question

我真的很难将两个div放在一起。如果我使用浮动，那么封面div似乎不会“看到”他内部的div。如果我使用一个位置，div不想进入一行。这是我最好的解决方案。但是如果我在主div中放入更多文本而不是在side-div中，或者反过来，他们就不再在同一行开始了。

html：

<div class="cover">
    <div class="main">
        <div class="inner">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
        </div>
    </div>
    <div class="side">
        <div class="inner">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
        </div>
    </div>
</div>

css：

div.cover {
width: 100%;
height: 100%;
background: none;}

div.main {
width: 65%;
height: 100%;
background: none;
display: inline-block;
top: 0px;
margin: 1%;}

div.side {
width: 25%;
height: 100%;
background: none;
display: inline-block;
top: 0px;
margin: 1%;}

div.inner {
width: 100%;
height: 100%;
border: 1px solid black;
padding: 1%;
text-align: left;
margin-bottom: 1%}

任何人都可以帮助我吗？提前谢谢。

伊娃

Answer 1

只需将vertical-align:top添加到div.main div：

即可

div.cover {
    width: 100%;
    height: 100%;
    background: none;
}
div.main {
    width: 65%;
    height: 100%;
    background: none;
    display: inline-block;
    top: 0px;
    margin: 1%;
    vertical-align:top;
}
div.side {
    width: 25%;
    height: 100%;
    background: none;
    display: inline-block;
    top: 0px;
    margin: 1%;
}
div.inner {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    padding: 1%;
    text-align: left;
    margin-bottom: 1%;
}

<div class="cover">
    <div class="main">
        <div class="inner">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
        </div>
    </div>
    <div class="side">
        <div class="inner">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
        </div>
    </div>
</div>

Answer 2

这里为您创建了一个快速修复程序。

使用clearfix +为背景提供了一些颜色，以便您可以看到它正常工作

.clearfix:before, 
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
    clear: both;
}
div.main,
div.side {
    float: left;
    background: white !important;
}

div.cover {
width: 100%;
height: 100%;
background: blue;}

div.main {
width: 65%;
height: 100%;
background: none;
display: inline-block;
top: 0px;
margin: 1%;}

div.side {
width: 25%;
height: 100%;
background: none;
display: inline-block;
top: 0px;
margin: 1%;}

div.inner {
width: 100%;
height: 100%;
border: 1px solid black;
padding: 1%;
text-align: left;
margin-bottom: 1%}

<div class="cover clearfix">
    <div class="main">
        <div class="inner">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
        </div>
    </div>
    <div class="side">
        <div class="inner">
            <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. </p>
        </div>
    </div>
</div>

Answer 3

刚刚清理了一下代码：

＆＃13;

div#divs{
    width: 100%;
    
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

div#divs div{
     border: 1px solid #000;
     padding: 1em .5em 1em .5em;
     margin-right: .5em;
}

div#divs div:first-child{
    flex: 2 0 0;
}

div#divs div:last-child{
    flex: 1 0 0;
}

＆＃13;

<div id="divs">
    <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
    
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. 
    </div>
</div>

＆＃13;

JS Fiddle example

什么？

我刚刚使用了flexbox的一些属性。我建议你读一下这个。

希望这会有所帮助。

CSS：如何将两个div放入另一个div中

3 个答案:

JS Fiddle example

什么？