display: inline-block失效，如何让图片与盒子横向并排？

我希望图片能与盒子横向并排显示，而非位于其下方。我尝试使用display: inline-block;但未生效，也试过float属性，同样没有效果，不知道该如何解决此问题。以下是我的代码：

原CSS代码 #

.text {
    text-align: left;
    font-size: 40px;
    border-color: black;
    border-style: solid;
    border-width: 10px;
    border-radius: 10%;
    margin-left: 20%;
    margin-right: 50%;
    margin-top: 5%;
    padding: 1%;
    background-color: black;
    color: white;
    opacity: 0.7;
    display: inline-block !important;
}

.image {
    position: relative;
    display: inline-block;
}
.generic_chemco {
    margin-bottom: 2000px;
    margin-top: 0%;
    margin-left: 1000px;
    margin-right: 0;
}

原HTML代码 #

<div class="header">
    <h1><i>Sketchless Chem</i></h1>
</div>

<div class="text">
    <p>
        <h1>Our mission</h1>
        Our mission here at Sketchless Chem .co is 
        to provide the best customer service and 
        provide to the every need of our clients,
        as well as make the best, most high 
        quality chemicals we know how to make.
        This is very important to us, and our workers
        agree. We use state of the art chemical purification
        methods, and have a specialised 3 stage testing method.
        This makes our chemicals truly state of the art.
    </p>
</div>
<div class="image">
    <img src="chemco.png" class="generic_chemco">
</div>

你的代码里有几个核心问题导致元素无法并排：

1. .text的margin-right: 50%占据了右侧大量空间，图片没有并排的位置
2. .generic_chemco的margin-left: 1000px是固定超大值，会把图片推到视口外，margin-bottom: 2000px完全多余，造成无效空白
3. HTML结构不规范：<p>标签不能嵌套<h1>，会导致渲染异常

下面提供两种可靠的修复方式：

方式一：使用Flex布局（最简洁高效） #

通过给父容器添加flex属性，直接实现元素并排，这是当前最推荐的布局方案：

修改后的HTML #

<div class="header">
    <h1><i>Sketchless Chem</i></h1>
</div>
<!-- 添加父容器统一控制布局 -->
<div class="content-wrapper">
    <div class="text">
        <h1>Our mission</h1>
        <p>
            Our mission here at Sketchless Chem .co is 
            to provide the best customer service and 
            provide to the every need of our clients,
            as well as make the best, most high 
            quality chemicals we know how to make.
            This is very important to us, and our workers
            agree. We use state of the art chemical purification
            methods, and have a specialised 3 stage testing method.
            This makes our chemicals truly state of the art.
        </p>
    </div>
    <div class="image">
        <img src="chemco.png" class="generic_chemco">
    </div>
</div>

修改后的CSS #

.content-wrapper {
    display: flex;
    align-items: flex-start; /* 让元素顶部对齐 */
    gap: 2rem; /* 文本和图片的间距 */
    margin-top: 5%;
    padding: 0 20%; /* 左右留白替代原margin */
}

.text {
    text-align: left;
    font-size: 40px;
    border: 10px solid black;
    border-radius: 10%;
    padding: 1%;
    background-color: black;
    color: white;
    opacity: 0.7;
    flex: 1; /* 让文本盒子自动填充剩余空间 */
}

.generic_chemco {
    max-width: 300px; /* 根据需求调整图片尺寸 */
    height: auto;
}

方式二：修复原inline-block布局问题 #

如果坚持使用inline-block，需要调整margin和宽度，确保元素总宽度不超出容器：

修改后的CSS #

.text {
    text-align: left;
    font-size: 40px;
    border: 10px solid black;
    border-radius: 10%;
    margin-left: 20%;
    margin-top: 5%;
    padding: 1%;
    background-color: black;
    color: white;
    opacity: 0.7;
    display: inline-block;
    width: 40%; /* 设置固定宽度，避免占满空间 */
    vertical-align: top; /* 顶部对齐 */
    box-sizing: border-box; /* 让padding和border计入宽度 */
}

.image {
    display: inline-block;
    vertical-align: top;
    margin-top: 5%;
}

.generic_chemco {
    max-width: 300px;
    height: auto;
    /* 移除原有的margin-left:1000px和margin-bottom:2000px */
}

内容的提问来源于stack exchange，提问作者hiiexist