文字不会环绕图像

Question

尝试在图像周围创建一个文本块并拒绝这样做。尝试使用float似乎以前工作但现在不工作。我在CSS或HTML方面并不令人惊讶，所以编辑它还没有太好用。

我已在其周围设置边框以显示问题所在：

我试图让这个文本块环绕图像，但它不会让步。

如果有人可以提供帮助，我会非常感激。我目前的代码是：

HTML

<div class="teamimg_1"></div>
    <div class="content">
        <h2>Student Letting</h2>
        <p>Lorem ipsum 200 words ... </p>
    </div>

CSS

.teamimg_1 {
  border: solid black 2px;
  float: left;
  height: 175px;
  padding: 0;
  width: 25%;
}

如果我没有显示足够的编码，请告诉我 - 我要坚持下去，我已经在我面前打开了每本书，试图解决这个问题！

Answer 1

听起来 - 从上面的评论中 - 个人的形象实际上是较大元素背景的一部分。我强烈建议你避免使用这种方法，而是在文档中使用真实的图像。这不仅在结构上更健全，在语义上更合适，它还允许您简单地浮动媒体内容，并实现您期望的结果：

for row in enumerate(sheet.iter_rows()):
    for j, cellObj in enumerate(row):
        header_cell = sheet.cell(row=1, column=j)

        if cellObj.column in ['H', 'I', 'L', 'M', 'AA', 'AB']:
            print(cellObj.value),
            if cellObj.value.upper() == 'OldValue1':
                cellObj.value = 1
                print(cellObj.value)
            elif cellObj.value.upper() == 'OldValue2':
                cellObj.value = 2
                print(cellObj.value)

然后简单地浮动图：

<section>
    <figure>
        <image alt="Sample Photo" src="http://placehold.it/200x200/"/>
    </figure>
    <h1>Lorem ipsum dolor et sit</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Integer purus leo...</p>
</section>

结果：http://jsfiddle.net/jonathansampson/quh1502x/

Answer 2

尝试添加

position: absolute;
display: inline-block; 

到您的图片

绝对位置将移除边距。应用此

后，您必须调整边距