如何代码div的有图像以及利润率和有DIV网站的去边上

问题描述 投票:-1回答:2

我在新的代码把我一直在研究,希望这是我的目标是什么更清晰的画面。

我想从基础到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和形象出现,但不会在页面的边缘。

css html5
2个回答
0
投票

我不知道如果我理解你问什么,但我只是复制的崇高文字的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它旁边的左股利。

另外,我想在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网站。


0
投票

.container{
  display:flex;
}
<div class="container">
  <div>
    <img src="http://placehold.it/350x150" />
  </div>
  <div>
  RIGHT
  </div>
</div>
This is one way to do it.

不过,我认为你应该改变这样的问题到如何学习在浏览器设计(例如https://hackernoon.com/css-box-model-45ecf4ac219e)什么的。

© www.soinside.com 2019 - 2024. All rights reserved.