文本仅浮动图像旁边的一行

时间:2017-01-31 05:15:55

标签: html css

删除了所有额外的东西,我想要的是向左浮动的行,所以图像旁边有一些文字,但它只移动了一行。如果有帮助的话,使用bootstrap,以及我自己的 CSS 文件。

example

listitem.remove(_position);

css代码:

<!--main body container -->
<div class="container">
  <div class="col-sm-6">
    <div class="row">   
      <h1>About Me</h1>
    </div>  
    <div id="bio" class="row">
      <img src= "assets/images/linkedin-logo.png" alt="default photo">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
    </div>  
  </div>
<!--Main Container End-->   
</div>  

4 个答案:

答案 0 :(得分:0)

你可以尝试这个:

<!--main body container -->
<div class="container">
    <div class="col-sm-6">
            <div class="row">   
                <h1>About Me</h1>
            </div>  
            <div id="bio" class="row">
                <img src= "assets/images/linkedin-logo.png" alt="default photo">

            Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
            </div>  
    </div>
<!--Main Container End-->   
</div>  

DEMO HERE

答案 1 :(得分:0)

将图片浮动到左侧

 #bio img {
     float: left;
 }

示例:https://jsfiddle.net/L75dhtny/

答案 2 :(得分:0)

你可以试试这个 -

&#13;
&#13;
<!--main body container -->
<div class="container">
    <div class="col-sm-6">
            <div class="row">   
                <h1>About Me</h1>
            </div>  
            <div id="bio" class="row">
            <img src="http://placehold.it/350x150">

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus orci nisl, ut maximus eros congue commodo. Vivamus fermentum dictum erat. Fusce feugiat maximus nulla, eget scelerisque eros sodales vel. Ut vehicula velit nisl, et tempor justo blandit in. Morbi a elit eleifend, efficitur felis sed, pellentesque risus. Praesent quis ante et massa vehicula efficitur. Cras id tortor et elit ornare bibendum non non arcu. Sed lectus enim, consectetur eget pretium in, tempus et quam. Suspendisse elementum porttitor elementum. Donec egestas lectus gravida risus convallis consectetur.
            </div>  
    </div>
<!--Main Container End-->   
</div>  
&#13;
collectionView
&#13;
&#13;
&#13;

答案 3 :(得分:0)

添加

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">