Question

我在正确对齐html代码方面遇到了很多困难。我正在建立一个网站，我有一个页面，我展示我的项目。我需要在左侧显示图像，在右侧显示文本。但是，我希望图像和描述图像的文本之间有一些空间。我还希望限制文本在开始在新行上键入之前的距离。现在，文本继续，在最终跳转到下一行之前填充整个水平线。这是我的代码：

 <style>

    a {
        color: #404040;
    }

    .bg-1 {
        background-color: #6DBDD6;
        color: #ffffff;
    }

    .container-fluid {
        padding-top: 80px;
        padding-bottom: 80px;

    }

    .img-1 {
        float: left;
        margin-left: 100px;
    }

  </style>



<div class="container-fluid bg-1">
    <div class="row">
    <div class="col-sm-4">
      <a href=""><img src="" class="img-1" height="281" width="388.9" alt="git"></a> 
    </div>
    <div class="col-sm-8">
      <h2>Project Name</h2> 
      <p>Created using java, this application allows for blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>

      <a href="">Click here to view full code!</a>
    </div>
    </div>
    </div>

Answer 1

首先不要将col-sm-类用于图像和文本的标记，因为它被定义为bootstrap中的列。

在一个col-sm

中使用其他标签

<div class="col-sm-8">
    <img class="theimg" src="blah.jpg"/>
    <div class="parag">sdadasd</div>
</div>

然后你可以将子元素浮动到left

  .col-sm-8 .theimg, 
  .col-sm-8 .parag {
     float:left;
     margin:2px;  
  }

以下是JsFiddle

如何在html中正确对齐图像和文本？

1 个答案: