我是新手，学习HTML。现在使用Dreamweaver帮助我。我正在尝试将图像放在文本框旁边。我制作了一个包含2列并排的容器。在左列上，我输入了文本和右侧，我放了图像。一切正常，但是我想更改文本的对齐方式，以便在左侧放置边距/间隙。但是这样做会将图像推下。我似乎无法弄清楚如何使图像较小以使文本适合或如何使其工作？我尝试漂浮向左，将显示器设置为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 </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;
}
I am new and learning html. For now using Dreamweaver to help me out. I am trying to put an image right next to a text box. I made a container which contains 2 columns side by side. on the left column i entered the text and the right side i put the image. Everything works fine, but i want to change the alignment of the text so to put a margin/gap on the left side. But doing this pushes the image down. I cant seem to figure out how to maybe make the image smaller for the text to fit or how to get this to work? I tried floating to left, set display to flex but still not getting what i need. Here is my html and 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 </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;
}
发布评论
评论（1）
首先，一些可能有用的备注
selector
.container。这两个列共享同一类名称。在这种情况下，您可能需要避免这种情况，因为您只针对文本。设置您的到所有元素的边框框：
box-size：border-box;。这将使控制元素的位置更容易，而无需进行计算以考虑填充，边框或边界。还请记住，Div是默认情况下。这意味着他们将占据完整的可用宽度，并像一列一样一个接一个地显示。您可以通过将其显示属性设置为inline-block（
display：inline-block;）。来更改此行为。
尽可能使用响应单元。通过用像素来硬编码图像的尺寸，您使您的页面响应更加困难。
这可能是您的新代码
但是：我强烈建议您查看CSS中的其他布局型号“ rel =“ nofollow noreferrer”> flex 或。这将使您的生活更加轻松。
flex 的快速示例
First a few remarks which may be useful
The selector
.container .row .col-lg-6, which you used for setting the margin to your text, selects both columns, as they share the same class name. In this case, you might want to avoid this, as you're only targeting the text.It's often a good idea to set your box-sizing property to border-box for all elements:
box-sizing: border-box;. This will make it easier to control the position of your elements, without having to make calculations for taking the padding, border or margin into account.Also remember that div's are block-level elements by default. This means they will take up the full available width, and display one after another, like a column. You could change this behavior by setting their display property to inline-block (
display: inline-block;).Try to use responsive units whenever possible. By hard coding your image's dimensions in pixels, you're making it harder to make your page responsive.
This could be your new code
BUT: I strongly recommend you take a look at other layout models in CSS, like flex or grid. This will make your life much easier.
Quick example with flex