时间戳

首页 > 解决方案 > 如何使用具有图像和边距的 div 编写网站并让 div 走到边缘

css - 如何使用具有图像和边距的 div 编写网站并让 div 走到边缘

问题描述

我在学习时正在输入新代码，希望这能更清楚地说明我的目标是什么。

我想从基于表格的表格转到div设置，我尝试过

<div class="image"></div>

有了这个 CSS

div.image:before {
   content:url(http://placehold.it/350x150);
}

但我不确定文本的位置，也将图像放入其中div并确保尺寸正确。

HTML 代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>My Site</title>
<meta http-equiv="Content Type" content="text/html; charset=utf-8" />
<style type="text/css">
.bgimg {
    background-image: ('file:///C:/Location/somimg.jpg');
}
</style>
</head>
<body>
<img src="somimg.jpg" width="246" height="94" alt="sm pic'/>
<div class="bgimg">
</div>

<div class="mainsection">

</div>

</body>
</html>

CSS 代码：

td {
    text-align: left;
    vertical-align: top;
    font-family:Tahoma;
    font-weight: bold;
    font-size:15px;
    color: #E5E5E5;
}

.div-with-bg
{
    width: 263px;
    height: 94px;
    background-image:url('smpic.jpg');
    margin:0;
    padding:0;
}

a {
    text-decoration: underline;
    color:#9D5FBB;
}

A:Hover  {
    color : #DBACF2;
    text-decoration : underline;
}

h1 {
    color: #9929bd;
    font-weight: normal;
    font-size: 20px;
    font-family: Tahoma;
}

H3 {
    color: #7F409E;
    font-weight: bold;
    font-size : 20px;
    font-family:Tahoma;
}

我的目标是让 div 出现在浏览器的边缘，因为我有多个表，我想用 div 元素替换它们。我在浏览器中查看了此设置，并且 div 和图像显示但不在页面边缘。

标签： csshtml

解决方案

我不知道我是否理解您的要求，但我只是在 Sublime 文本中复制了您的 HTML，并为 css 执行了此操作：

div.image:before {
    width: 263px;
    height: 94px;
    background-image:url('somepic.jpg');
    content:url(http://placehold.it/350x150);
    margin:0;
    padding:0;
}

这个对我有用。我在左边有左 div，在它旁边有右 div。

另外，我会在 css 文件中设置 div 的样式：

div.right {
float: "middle"
}

div.left {
float: "left";
}

对于 HTML：

<body>
    <div class="image left">Left Div</div>
<div class="right"">Right Div</div>
</body>

如果你想让你的生活更轻松，只需学习 flexbox。我了解到它的方式是使用这个网站。

推荐阅读