Question

这就是我要追求的目标，其中每条绿线都是父div。

这是我到目前为止尝试过的：

    <div id="gym" class="main_container">
        <div id="gym_activity_title_hours_pic" class="activity_title_hours_pic">
            <!-- <div id="gym_title_hours" class="activity_title_hours"> -->
                <div id="gym_title" class="activity_title">
                    The Gym
                </div>
                <div id="gym_hours" class="activity_hours">
                    5 Hours
                </div>
            <!-- </div> -->
            <div id="gym_pic" class="activity_pic">
                <img src="./images/gym.jpg" class="pic"/>
            </div>
        </div>
    </div>

这是CSS

.main_container {
    width: 40%;
    height: 40%;
    display: inline;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.activity_title_hours_pic {
    display: inline;
}

.activity_title_hours {
    float: left;
    width: 50%;
}

.activity_title {
    /* float: left; */
    float: left;
    width: 50%;
}

.activity_hours {
    /* float: left; */
    float: left;
    width: 50%;
}

.activity_pic {
    float:right;
    width: 50%;
}
.pic {
    box-sizing: border-box;
    margin-top: 1%;
    height: 10%;
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    background-repeat:no-repeat;
    background-size:cover;
}

这是我目前得到的结果：

如您所见，该图像处于活动时间以下，这是不希望的。感谢您的帮助！

Answer 1

您很可能陷入了此处编写的所有CSS的困境。您只需很少的代码即可完成您所要的内容。首先，摆脱您的float-在现代CSS中它们几乎没有用。使用flexbox代替：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

乍一看可能有些棘手，但它几乎与所有地方都兼容，并且解决了过去的许多CSS陷阱。

在不花费过多CSS的情况下，您可能首先需要仔细检查倒数第二个结束</div>，以便仅包围#gym_title和#gym_hours-对现在，您的HTML代码无法描述您在图表中绘制的内容。

我在这里写了一个小笔：https://codepen.io/dustinkeeton/pen/NEgbLe

P.S。 codepen.io是处理少量HTML / CSS / JS代码并共享它的好方法。

Answer 2

只需从 activity_hours 类中删除 float：left ，然后取消注释 gym_title_hours div。

HTML：

<div id="gym" class="main_container">
    <div id="gym_activity_title_hours_pic" class="activity_title_hours_pic">

            <div id="gym_title_hours" class="activity_title_hours">
            <div id="gym_title" class="activity_title">
                The Gym
            </div>
            <div id="gym_hours" class="activity_hours">
                5 Hours
            </div>
        </div> 

        <div id="gym_pic" class="activity_pic">
            <img src="./images/gym.jpg" class="pic"/>
        </div>

    </div>
</div>

CSS：

.main_container {
    width: 40%;
    height: 40%;
    display: inline;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.activity_title_hours_pic {
    display: inline;
}

.activity_title_hours {
    float: left;
    width: 50%;
}

.activity_title {
    /* float: left; */
    float: left;
    width: 50%;
}

.activity_hours {
    width: 50%;
}

.activity_pic {
    float:right;
    width: 50%;
}
.pic {
    box-sizing: border-box;
    margin-top: 1%;
    height: 10%;
    width: 10%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 6px;
    background-repeat:no-repeat;
    background-size:cover;
}

Answer 3

如果我是你，我将开始使用网格系统。观看几个youtube视频。 CSS在没有网格或flexbox的情况下变得混乱。一旦您掌握了网格，我便可以使用flexbox。

Vojtone正确地将浮标取出来，但它仍然凌乱。

HTML

<div id="gym" class="grid-container">
    <div id="gym_title" class="grid-item box1">The Gym</div>
    <div id="gym_hours" class="grid-item box2">5 Hours</div>  
    <div class="grid-item box3">
         <img src="https://www.thegymgroup.com/assets/img/components/c050.03-movember rich-text-block/the-gym-group-logo-movember.png" id="gym_pic" class="pic" height=100 width=150>
    </div> 
</div>

CSS 网格由12列组成，只是与列和行的跨度混淆而已，您将掌握它的实质。

.grid-container {
   display: grid;
   border:solid 2px;
 }

.box1{
    grid-column: 1 / span 11;
    border:solid 2px
 }

 .box2{
    grid-column: 1 / span 11;
    border:solid 2px
     }

 .box3{
    grid-column: 12 / span 1;
    grid-row: 1 / span 2;
   }

Codepen

CODE PEN EXAMPLE HERE

我如何在一个旁边堆叠两个div

3 个答案: