在HTML中放置图像

当我们谈到HTML/CSS时，我超级不好/ newb，所以这可能是非常容易的。你如何布置这样的四个图像？ -在HTML中放置图像

我用四个div标签，现在做到这一点（或者我应该说的尝试？）。

div.imageBlockA { 
    float: top; 
    float: left; 
} 
div.imageBlockB { 
    float: top; 
    float: right; 
} 
div.imageBlockC { 
    float: bottom; 
    float: left; 
} 
div.imageBlockD { 
    float: bottom; 
    float: right; 
}

谢谢！

来源

2016-02-19 yun.cloud

可能重复的[对齐2图像，一个右对其他左div]（http://stackoverflow.com/questions/16603884/align-2-images-one-to-right-other-to-left -inside-div） –

没有'float：top'或'float：bottom'。看看[** LearnLayout.com **]（http://learnlayout.com/） –

@Paulie_D感谢您的领导！我不知道！我真的不知道很多html/css（专长在于c/C++/objective-c）。 –

没有看到你的布局，请尝试以下操作：

.image { 
 
    width: 50%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
    } 
 
.image img { 
 
    max-width: 100%; 
 
    border: 2px solid red; 
 
    display: block; 
 
    margin: 0 auto; 
 
    }

<div class="image"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div>

你需要添加更多的造型使它看起来您想要的方式，但有实现的一种方式您正在描述的基本布局。

正如下面评论中正确地指出的那样，请尝试添加box-sizing: border-box，以便您可以安全地向外部div元素添加填充/边框而不必担心会添加额外的宽度/高度（可能会通过制作下一个图像来破坏布局下一行，因为宽度将超过50％）。

编辑 - 忘记提及和@Paulie_D在您的问题的评论中指出，float属性没有top或bottom值。

来源

2016-02-19 16:00:19

对此进行扩展，尝试添加填充和框大小：边框：对.image类（以停止图像触摸）。 –

@MatthewLymer刚刚编辑我自己的答案，更多的在这:-)熊与我 –

谢谢！这是做到了 –

table { 
 
    width: 100%; 
 
} 
 
td { 
 
    text-align: center; 
 
} 
 
.image { 
 
    background-color: lightblue; 
 
    width: 80%; 
 
    height: 40px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <p class="image">IMAGE</p> 
 
    </td> 
 
    <td> 
 
     <p class="image">IMAGE</p> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <p class="image">IMAGE</p> 
 
    </td> 
 
    <td> 
 
     <p class="image">IMAGE</p> 
 
    </td> 
 
    </tr> 
 
</table>

无论什么样的一些人可能会说，我发现，使用table标签用单独的表行和字段一起减少，你必须做布局时，做的工作量。您可能不同意这种方法，但它通常很有用 - 特别是在开始使用HTML和CSS时。

来源

2016-02-19 16:08:49 Nathangrad

另一种方式是

body { 
 
    
 
    text-align: center; 
 
} 
 
.image { 
 
    display: inline-block; 
 
    width: 49%; 
 
    }

<div class="image"> 
 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div> 
 
<div class="image"> 
 
     <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg"> 
 
</div>

这款采用text-align: center;并在某些情况下，这是更灵活。

来源

2016-02-19 16:10:16

在HTML中放置图像

回答

相关问题