【问题标题】:CSS Float: Floating an image to the left of the textCSS Float:将图像浮动到文本的左侧
【发布时间】:2011-07-09 01:50:07
【问题描述】:

对于每个邮箱,我希望缩略图向左浮动,文本向右浮动。我不希望拇指环绕文本。

这是我的html代码:

<div class="post-container">                
   <div class="post-thumb"><img src="thumb.jpg" /></div>
   <div class="post-title">Post title</div>
   <div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

我尝试了几种方法,但仍然无法正常工作...文本不会显示在右侧...

这是我的 CSS 代码:

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
    clear:left;
}

.post-content {
    float:right;
}

【问题讨论】:

    标签: html css css-float


    【解决方案1】:

    使用 display: flex 的解决方案(具有响应行为):http://jsfiddle.net/dkulahin/w3472kct

    HTML:

    <div class="content">
        <img src="myimage.jpg" alt="" />
        <div class="details">
            <p>Lorem ipsum dolor sit amet...</p>
        </div>
    </div>
    

    CSS:

    .content{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .content img {
        width: 150px;
    }
    .details {
        width: calc(100% - 150px);
    }
    @media only screen and (max-width: 480px) {
        .content {
            flex-direction: column;
        }
        .details {
            width: 100%;
        }
    }
    

    【讨论】:

      【解决方案2】:

      .post-container{
          margin: 20px 20px 0 0;  
          border:5px solid #333;
          width:600px;
          overflow:hidden;
      }
      
      .post-thumb img {
          float: left;
          clear:left;
          width:50px;
          height:50px;
          border:1px solid red;
      }
      
      .post-title {
           float:left;   
          margin-left:10px;
      }
      
      .post-content {
          float:right;
      }
      <div class="post-container">                
         <div class="post-thumb"><img src="thumb.jpg" /></div>
         <div class="post-title">Post title</div>
         <div class="post-content"><p>post description description description etc etc etc</p></div>
      </div>

      jsFiddle

      【讨论】:

        【解决方案3】:

        在这些情况下,我几乎总是只在我的文本元素上使用溢出:隐藏,它通常像一个魅力;)

        .post-container {
         margin: 20px 20px 0 0;
         border:5px solid #333;
        }
        .post-thumb img {
         float: left;
        }
        .post-content {
         overflow:hidden;
        }
        

        【讨论】:

          【解决方案4】:

          这就是你所追求的吗?

          • 我将您的标题更改为 h3(标题)标签,因为它比使用 div 更具语义选择。

          Live Demo #1
          Live Demo #2 (顶部有标题,不确定你是否想要)

          HTML:

          <div class="post-container">                
              <div class="post-thumb"><img src="http://dummyimage.com/200x200/f0f/fff" /></div>
              <div class="post-content">
                  <h3 class="post-title">Post title</h3>
                  <p>post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc post desc </p>
             </div>
          </div>
          

          CSS:

          .post-container {
              margin: 20px 20px 0 0;  
              border: 5px solid #333;
              overflow: auto
          }
          .post-thumb {
              float: left
          }
          .post-thumb img {
              display: block
          }
          .post-content {
              margin-left: 210px
          }
          .post-title {
              font-weight: bold;
              font-size: 200%
          }
          

          【讨论】:

          • 谢谢。如果我希望 .post-content 的内容与 post-thumb 图像的下半部分对齐,我该怎么做?我不能给'.post-content'高度。
          • 如果我不知道图像的宽度但现在,.post-content 上的margin-left: 210px 就在那里..!有没有不使用js的修复方法?
          【解决方案5】:

          查看此示例:http://jsfiddle.net/Epgvc/1/

          我只是将标题浮动到左侧并在底部添加了一个clear:both div..

          【讨论】:

            【解决方案6】:

            只需要将两个元素都向左浮动:

            .post-container{
                margin: 20px 20px 0 0;  
                border:5px solid #333;
            }
            
            .post-thumb img {
                float: left;
            }
            
            .post-content {
                float: left;
            }
            

            编辑:实际上,您不需要宽度,只需向左浮动

            【讨论】:

            • 确保在 #div.post-content 下方也有一个带有 clear:both 的 div。
            【解决方案7】:

            设置post-content 和post-thumb 的宽度,以获得两列布局。

            【讨论】:

              猜你喜欢
              • 2014-11-17
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2019-08-21
              • 2015-11-21
              • 2016-07-11
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多