html - 我有一个超大屏幕内的子弹列表。我希望旁边的图像与元素符号的大小完全相同？

Question

编辑:我设法调整了图像的大小，我不得不制作一个静态数字，但我更希望高度由列表的长度决定。除此之外，我的新问题是让它与超大屏幕内的文本对齐。 Align="right"将图像放在右侧，但会使其变得草率并且重叠在超大屏幕边框的底部。

HTML:

<div class="jumbotron">
    <div class="secrets">
        <h2> The Five Basics </h2>
        <ul>
            <li> number 1 </li>
            <li> number 2</li>
            <li> number 3 </li>
            <li> number 4 </li>
            <li> number 5 </li>
        </ul>
        <div class ="mindpower">
            <img src="images/mindpower.jpg"> 
        </div>
    </div>
</div>

CSS main.css(我的 CSS)

.secrets img {
    max-width:25%;
    height:atuo;
}

CSS Bootstrap .css

.jumbotron {
    padding: 30px;
    margin-bottom: 30px;
    color: inherit;
    background-color: #eee;
}
.jumbotron h1,
.jumbotron .h1 {
    color: inherit;
}
.jumbotron p {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: 200;
}
.jumbotron > hr {
    border-top-color: #d5d5d5;
}
.container .jumbotron {
    border-radius: 6px;
}
.jumbotron .container {
    max-width: 100%;
}
@media screen and (min-width: 768px) {
    .jumbotron {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .container .jumbotron {
        padding-right: 60px;
        padding-left: 60px;
    }
    .jumbotron h1,
    .jumbotron .h1 {
        font-size: 63px;
    }
}

这会在列表后面放置一个漂亮的灰色背景，就像一个超大屏幕。当我放置图像时，它位于列表下方，使超大屏幕展开并且看起来非常难看。我正在尝试获取它，以便图像直接位于列表旁边，使高度保持与列表一样大，并保持比例正确。

Answer 1

看看这是否可以解决这个问题。这里我为每个 div 添加了大小为 6 的 bootstrap 列，你可以根据你的要求进行调整:

<div class="jumbotron">
    <div class="col-md-6 secrets ">
        <h2> The Five Basics </h2>
        <ul>
            <li> number 1 </li>
            <li> number 2</li>
            <li> number 3 </li>
            <li> number 4 </li>
            <li> number 5 </li>
        </ul>
    </div>

    <div class="col-md-6 mindpower">
        <img src="images/mindpower.jpg"> </a>
    </div>
</div>