两个并排的 div，左边一个包含文本，右边一个包含图像。

huangapple
go评论83阅读模式
英文:

Two divs next to each other, the left one containing text, the right one an image

问题

I understand the two variants you want to achieve. Here's the translated code for your HTML structure:

  1. <div id="wrapper" style="background-color: red;">
  2.   <div id="left-side" style="background-color: blue;">
  3.     <div id="text" style="max-width: 750px; min-width: 250px; background-color: orange; float: right; overflow-wrap: break-word;">
  4.       这个文本不应超过750像素
  5.     </div>
  6.   </div>
  7.   <div id="right-side" style="background-color: blue; max-width: 50%; overflow: auto;">
  8.     图片
  9.   </div>
  10. </div>

The translated code should work for both variants you mentioned: text and image side by side at 50% width and text above the image with both centered and at 100% width.

英文:

I try to set up a website with an image of a letter and a transcription. So basically:

  1. &lt;div id=&quot;wrapper&quot; style=&quot;background-color:red&quot;&gt;
  2.   &lt;div id=&quot;left-side&quot; style=&quot;background-color:blue&quot;&gt;
  3.     Text
  4.   &lt;/div&gt;
  5.   &lt;div id=&quot;right-side&quot; style=&quot;background-color:blue; min-width=50%; overflow: auto;&quot;&gt;
  6.     Image
  7.   &lt;/div&gt;
  8. &lt;/div&gt;

The image can either take up 50% of the width if the two divs are next to each other in the same line and 100% if the screen is too small so that the 2nd div is in the next line.

The text should not exceed a max-width of 750px and align to the right of the center page. If the divs are in two rows the text-div should be in the center.

This is what I have so far:

  1. &lt;div id=&quot;wrapper&quot; style=&quot;background-color:red&quot;&gt;
  2.   &lt;div id=&quot;left-side&quot; style=&quot;background-color:blue&quot;&gt;
  3.     &lt;div id=&quot;text&quot; style=&quot;max-width:750px; min-width: 250px; background-color:orange; float:right; overflow-wrap: break-word;&quot;&gt;
  4.       This text should not be longer than 750px
  5.     &lt;/div&gt;
  6.   &lt;/div&gt;
  7.   &lt;div id=&quot;right-side&quot; style=&quot;background-color:blue; max-width=50%;overflow: auto;&quot;&gt;
  8.     Image
  9.   &lt;/div&gt;
  10. &lt;/div&gt;

The problem is: Dealing with the two variants:

  1. text and image next to each other, each 50% of the width
  2. text above and image below, both divs in the center and width=100%

答案1

得分: 1

这是代码的翻译部分：

  1. #wrapper {
  2.     background-color: red;
  3. }
  5. #left-side {
  6.     background-color: yellow;
  7.     text-align: right;
  8.     width: 49%;
  9. }
  11. #right-side {
  12.     background-color: green;
  13. }
  15. #text {
  16.     display: inline-block;
  17.     max-width: 750px;
  18.     text-align: right;
  19.     background-color: orange;
  20. }
  22. @media (min-width: 1500px) {
  23.     #left-side {
  24.         display: inline-block;
  25.     }
  27.     #right-side {
  28.         display: inline-block;
  29.         width: 49%;
  30.     }
  31. }

希望这有帮助。

英文:

Probably what you want to use a @media rule based on the screen width. Here is an example that would limit the image to 49% and show beside the text if the screen where 1500 px or wider. (Eliminate the inline styling.)

  1. #wrapper {
  2.     background-color: red;
  3. }
  5. #left-side {
  6.     background-color: yellow;
  7.     text-align: right;
  8.     width: 49%;
  9. }
  11. #right-side {
  12.     background-color: green;
  13. }
  15. #text {
  16.     display: inline-block;
  17.     max-width: 750px;
  18.     text-align: right;
  19.     background-color: orange;
  20. }
  22. @media (min-width: 1500px) {
  23.     #left-side {
  24.         display: inline-block;
  25.     }
  27.     #right-side {
  28.         display: inline-block;
  29.         width: 49%;
  30.     }
  31. }

huangapple
  • 本文由 发表于 2023年3月31日 04:08:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/75892573.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定