Как кодировать веб-сайт с div, которые имеют изображение, а также поля и заставляют div идти к краю - PullRequest
Новая
       0

Как кодировать веб-сайт с div, которые имеют изображение, а также поля и заставляют div идти к краю

0 голосов
/ 06 февраля 2019

Я добавляю новый код, поскольку я изучал. Надеюсь, это более ясная картина моей цели.

Я хочу перейти от таблицы к настройке 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 и изображение отображаются, но не на краю страницы.

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019 

.container{
  display:flex;
}
<div class="container">
  <div>
    <img src="http://placehold.it/350x150" />
  </div>
  <div>
  RIGHT
  </div>
</div>
Это один из способов сделать это.

Однако я думаю, что вы должны изменить вопрос на то, как я могу научиться проектировать в браузере (например, https://hackernoon.com/css-box-model-45ecf4ac219e) или что-то в этом роде.

0 голосов
/ 06 февраля 2019

Не знаю, понимаю ли я, о чем вы спрашиваете, но я просто скопировал ваш HTML в Sublime text и сделал это для 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 рядом с ним.

Кроме того, я бы использовал стиль div в файле css: 

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.Как я узнал, он использовал этот сайт.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...