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

umuewwlo  于 2023-04-01  发布在  其他
关注(0)|答案(1)|浏览(153)

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

<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%

5gfr0r5j

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%;
    }
}

相关问题