Question

我一直在学习新代码，希望这可以更清楚地了解我的目标。

我想从基于表的设置转到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和图像，但未显示在页面边缘。

Answer 1

我不知道我是否理解您的要求，但我只是将您的HTML复制为Sublime文本，并针对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。我了解它的方式是使用this网站。

Answer 2

<div class="container">
  <div>
    <img src="http://placehold.it/350x150" />
  </div>
  <div>
  RIGHT
  </div>
</div>

-> 'None'

这是做到这一点的一种方法。

但是我认为您应该将问题更改为如何在浏览器（例如https://hackernoon.com/css-box-model-45ecf4ac219e）中学习设计之类的东西。

如何使用具有图像和边距且div移至边缘的div编码网站

2 个答案: