带有标题、左侧图像和右侧文本的HTML卡
我试图制作一张HTML卡片,但我希望其布局如下图所示: 我仍然想要卡片效果(阴影边框,悬停),并且我希望它始终保持图像的宽度不变 这是我的代码:带有标题、左侧图像和右侧文本的HTML卡,html,css,image,card,Html,Css,Image,Card,我试图制作一张HTML卡片,但我希望其布局如下图所示: 我仍然想要卡片效果(阴影边框,悬停),并且我希望它始终保持图像的宽度不变 这是我的代码: <style> .card { /* Add shadows to create the "card" effect */ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; padding: 2px 16px; } /* On mou
<style>
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
padding: 2px 16px;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* Add some padding inside the card container */
.container {
padding: 4px 4px;
}
</style>
<div class="card">
<h1> TITLE </h1>
<img src="img_avatar.png" alt="Avatar" style="float:left;width:45%">
<div class="container" style="float:right;width:45%">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
.卡片{
/*添加阴影以创建“卡片”效果*/
盒影:0 4px 8px 0 rgba(0,0,0,0.2);
过渡:0.3s;
填充:2x16px;
}
/*在鼠标悬停时,添加更深的阴影*/
.卡:悬停{
盒影:0 8px 16px 0 rgba(0,0,0,0.2);
}
/*在卡片容器中添加一些填充物*/
.集装箱{
填充:4px4px;
}
标题
无名氏
建筑师和工程师
但是结果并不好:图像在卡片外面(你可以看到)。我怎样才能修好它
多谢各位 我希望这会有帮助
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
p{
margin-left: 3em;
padding-top: 1em;
margin-top: 1em;
}
.part2{
display: grid;
grid-template-columns: 1fr 1fr;
margin: 1em;
padding: 1em;
}
h4{
margin: 1em;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
b {
padding: 2px 16px;
}
</style>
</head>
<body>
<div class="card">
<p>Architect & Engineer</p>
<div class="part2"><img src="1.jpg" alt="Avatar" style="width:100%">
<h4>John Doe</h4>
</div>
</div>
</body>
</html>
.卡片{
盒影:0 4px 8px 0 rgba(0,0,0,0.2);
过渡:0.3s;
宽度:40%;
}
p{
左边距:3em;
垫面:1米;
边缘顶部:1米;
}
.第二部分{
显示:网格;
网格模板柱:1fr 1fr;
边缘:1米;
填充:1em;
}
h4{
边缘:1米;
}
.卡:悬停{
盒影:0 8px 16px 0 rgba(0,0,0,0.2);
}
b{
填充:2x16px;
}
建筑师和工程师
无名氏
我更改了HTML/CSS中的一些内容,所以我会回答任何问题,祝你好运 请给出一个代码的工作示例。希望您至少尝试自己编写代码。我建议你做一些,或者通过谷歌,或者通过搜索,尝试一下。如果您仍然有问题,请带着您的代码回来,并解释您尝试了什么。我尝试编写代码已经很长时间了,但由于我尝试的每次修改都会破坏卡,因此我没有输入代码。然而,我链接的参考已经包含了一个代码的工作示例,我相信它只需要很少的修改就可以按照我的意愿工作,我只是无法让它工作。无论如何,我现在添加了我的最佳尝试代码