css 两个div彼此相邻，左边一个包含文本，右边一个包含图像

umuewwlo 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(154)

我试着建立一个网站，上面有一封信的图片和一份抄本。所以基本上：

<div id="wrapper" style="background-color:red">
  <div id="left-side" style="background-color:blue">
    Text
  </div>
  <div id="right-side" style="background-color:blue; min-width=50%; overflow: auto;">
    Image
  </div>
</div>

如果两个div在同一行中彼此相邻，则图像可以占据宽度的50%，如果屏幕太小，则第二个div在下一行中，则图像可以占据100%。
文本的最大宽度不应超过750 px，并与中心页面的右侧对齐。如果div在两行中，则text-div应位于中心。
这是我目前掌握的情况：

<div id="wrapper" style="background-color:red">
  <div id="left-side" style="background-color:blue">
    <div id="text" style="max-width:750px; min-width: 250px; background-color:orange; float:right; overflow-wrap: break-word;">
      This text should not be longer than 750px
    </div>
  </div>
  <div id="right-side" style="background-color:blue; max-width=50%;overflow: auto;">
    Image
  </div>
</div>

问题是：处理两个变量：
1.文本和图像彼此相邻，各占宽度的50%
1.上面的文本和下面的图像，两个div都在中间，宽度=100%

css

来源：https://stackoverflow.com/questions/75892573/two-divs-next-to-each-other-the-left-one-containing-text-the-right-one-an-imag

1条答案

按热度按时间

5gfr0r5j1#

也许你想使用基于屏幕宽度的@media规则。这里有一个例子，它将图像限制为49%，如果屏幕为1500像素或更宽，则在文本旁边显示。（消除内联样式。）

#wrapper {
    background-color: red;
}

#left-side {
    background-color: yellow;
    text-align: right;
    width: 49%;
}

#right-side {
    background-color: green;
}

#text {
    display: inline-block;
    max-width: 750px;
    text-align: right;
    background-color: orange;
}

@media (min-width: 1500px) {
    #left-side {
        display: inline-block;
    }

    #right-side {
        display: inline-block;
        width: 49%;
    }
}

赞(0）回复(0）举报 2023-04-01

我来回答

css 两个div彼此相邻，左边一个包含文本，右边一个包含图像

1条答案

相关问题

热门标签

最新问答