如何添加與圖像並排的文本塊並有邊距

Question

我是新手，正在學習 html。現在使用 Dreamweaver 來幫助我。 我正在嘗試將圖像放在文本框旁邊。 我制作了一個容器，其中並排包含 2 列。 在左欄我輸入了文字，在右邊我放了圖片。 一切正常，但我想更改文本的 alignment，以便在左側放置邊距/間隙。 但是這樣做會降低圖像。 我似乎無法弄清楚如何使圖像變小以適合文本或如何讓它工作？ 我嘗試向左浮動，將顯示設置為 flex，但仍然沒有得到我需要的。 這是我的 html 和 css：


<body>
<div class="container">
    <div class="row">
      <div class="col-lg-6">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus&nbsp;</div>
      <div class="col-lg-6"><img src="images/banner1.jpg" width="770" height="415" alt=""/></div>
  </div>
</div>
</body>

@charset "utf-8";
.container .row .col-lg-6 {
    margin-left: 20px;  
}

Answer 1

首先是一些可能有用的評論

您用於設置文本邊距的選擇器.container.row.col-lg-6選擇了兩列，因為它們共享相同的 class 名稱。 在這種情況下，您可能希望避免這種情況，因為您只針對文本。
將所有元素的box-sizing 屬性設置為 border-box 通常是個好主意： box-sizing: border-box; . 這將使您更容易控制元素的 position，而無需進行計算以考慮填充、邊框或邊距。
還要記住，默認情況下，div 是塊級元素。 這意味着它們將占據整個可用寬度，並像一列一樣一個接一個地顯示。 您可以通過將其 display 屬性設置為 inline-block ( display: inline-block; ) 來更改此行為。
盡可能使用響應單元。 通過以像素為單位對圖像的尺寸進行硬編碼，使頁面響應變得更加困難。

這可能是您的新代碼

 @charset "utf-8"; * { box-sizing: border-box; } /* the selector below selects BOTH columns */ /*.container.row.col-lg-6 { margin-left: 20px; } */.column-1 { display: inline-block; margin-left: 20px; width: 30vw; }.column-2 { display: inline-block; width: 50vw; }.column-2 img { width: 100%; }

 <body> <div class="container"> <div class="row"> <div class="col-lg-6 column-1"> Pellentesque habitant morbi tristique senectus et.netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus&nbsp; </div> <div class="col-lg-6 column-2"> <img src="https://picsum.photos/600/400" alt="" /> </div> </div> </div> </body>

但是：我強烈建議您查看 CSS 中的其他布局模型，例如flex或grid 。 這將使您的生活更輕松。

使用 flex 的快速示例

 @charset "utf-8"; * { box-sizing: border-box; }.flex-container { display: flex; /* makes this element a flex container, and its child elements flex items */ justify-content: space-evenly; /* distributes available space evenly between the flex items */ align-items: center; /* aligns the flex items vertically */ }.flex-item-1 { width: 30vw; }.flex-item-2 { width: 50vw; }.flex-item-2 img { width: 100%; }

 <body> <div class="flex-container"> <div class="flex-item-1"> Pellentesque habitant morbi tristique senectus et.netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus&nbsp; </div> <div class="flex-item-2"> <img src="https://picsum.photos/600/400" alt="" /> </div> </div> </div> </body>

如何添加與圖像並排的文本塊並有邊距

問題描述

1 個解決方案

解決方案1
0 2022-06-29 06:56:20

如何添加與圖像並排的文本塊並有邊距

問題描述

1 個解決方案

解決方案1 0 2022-06-29 06:56:20

解決方案1
0 2022-06-29 06:56:20