Как создать страницу с двумя столбцами в HTML5 через Notepad ++ - PullRequest
Новая
       7

Как создать страницу с двумя столбцами в HTML5 через Notepad ++

0 голосов
/ 29 января 2019

Попытка сделать страницу с двумя столбцами, чтобы у меня было два столбца информации.Я не могу заставить его работать, хотяУ меня есть большой стол, занимающий половину страницы и сдвинутый влево, но я не могу заставить другую часть двигаться вправо!Это просто идет внизу.Пожалуйста, если вы знаете, как сказать мне.Я должен сделать это для школьного проекта!Вот мой код: 

	.body {
	font-family: "Bookman Old Style";
	background:url('https://i.gifer.com/7sav.gif');
	color: white;
	}
			
	<!--backup    background-color: #D10F0F;-->
			
	.table {
	background-color: #B6B6B6;
	font-size: 17px;
	border-color: white;
	}
			
	.header {
	}
			
	.rowone {
	float: left;
    width: 50%;
	}
			
	.rowtwo:after {
	content: "";
	display: table;
	clear: both;
	float: right;
	}
<!DOCTYPE html>
	<html>
    <head>
    <title>My Typical Day</title>
	</head>
	<body class="body">
	<div class="header">
	<center>
    <!--Header-->
	<h1><u>My Typical Day</u></h1>
	<h4><u>By: Taylor Sloan</u></h4>
	</div>
    <!--End Of Header-->
	<center>
    <!--Table Start (ROW 1)-->
    <div class="rowone">
	<table border="2" bordercolor="white" class="table">
	<tr>
	<td><strong>Hour</strong></td>
    <td><strong>Class</strong></td>
	<td><strong>Teacher</strong></td>
	<td><strong>Image</strong></td>
	</tr>
	<tr>
	<td>1</td>
	<td>Spanish 2.5</td>
	<td>Córdoba</td>
	<td><!--TAKEN OUT--></td>
	</tr>
	<tr>
	<td>2</td>
	<td>Wood Technologies I</td>
	<td>Cortez</td>
    <td><!--TAKEN OUT--></td>
	</tr>
	<tr>
	<td>3</td>
	<td>Honors Geometry</td>
	<td>Alexander</td>
	<td><!--TAKEN OUT--></td>
	</tr>
	<tr>
	<td>4</td>
	<td>Honors Biology</td>
	<td>Martens</td>
	<td><!--TAKEN OUT--></td>
	</tr>
	<tr>
    <td>5</td>
	<td>Honors English Language Arts</td>
	<td>McCrossen</td>
	<td><!--TAKEN OUT--></td>
	</tr>
	<tr>
	<td>6</td>
	<td>Physical Education</td>
	<td>Lowe</td>
	<td><!--TAKEN OUT--></td>
	</tr>
	<tr>
	<td>7</td>
	<td>Web Design</td>
	<td>Foster</td>
	<td><!--TAKEN OUT--></td>
	</tr>
	<table>
	</div>
    <!--Table End-->
    <!--ROW2 STARTS-->
	<div class="rowtwo">
	<h3>My Top Three Favorite Books and Why</h3>
	<ol>
	<li>The Dragon Inside Series</li>
	</ol>
	</div>
	<h5><em>Email Me!</em></h5>
	</div>
	</center>
	</body>
	</html>

Может кто-нибудь сказать мне, что делать, чтобы исправить это и прикрепить рабочую версию?Я также делаю это в Notepad ++, не уверен, что это имеет значение.

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Div элементы будут отображаться как «блочные» элементы по умолчанию, что позволяет только один на строку.Следующий элемент уровня блока появится под ним.

Добавьте это правило CSS в .rowone и .rowtwo: display: inline; или display: inline-block;

Редактировать :MichaelvE ответ правильный.Div с плавающими уровнями блоков позволит двум блокам появляться на одной строке, как встроенный элемент.Я пропустил открытые теги, просматривая код.

0 голосов
/ 29 января 2019

Вам просто нужно убедиться, что ваши теги элементов закрыты в правильных местах, теги CENTER, DIV и TABLE должны быть закрыты правильно.

Кроме того, тег CENTER теперь не рекомендуется иРекомендуется использовать CSS для центрирования ваших элементов, например text-align: center 

body {
  font-family: "Bookman Old Style";
  background: url('https://i.gifer.com/7sav.gif');
  color: white;
}

<!--backup background-color: #D10F0F;
-->.table {
  background-color: #B6B6B6;
  font-size: 17px;
  border-color: white;
}

.header {}

.rowone {
  float: left;
  width: 50%;
}

.rowtwo:after {
  content: "";
  display: table;
  clear: both;
  float: right;
}
<div class="header">
  <center>
    <!--Header-->
    <h1><u>My Typical Day</u></h1>
    <h4><u>By: Taylor Sloan</u></h4>
  </center>
</div>
<!--End Of Header-->
<center>
  <!--Table Start (ROW 1)-->
  <div class="rowone">
    <table border="2" bordercolor="white" class="table">
      <tr>
        <td><strong>Hour</strong></td>
        <td><strong>Class</strong></td>
        <td><strong>Teacher</strong></td>
        <td><strong>Image</strong></td>
      </tr>
      <tr>
        <td>1</td>
        <td>Spanish 2.5</td>
        <td>Córdoba</td>
        <td>
          <!--TAKEN OUT-->
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>Wood Technologies I</td>
        <td>Cortez</td>
        <td>
          <!--TAKEN OUT-->
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>Honors Geometry</td>
        <td>Alexander</td>
        <td>
          <!--TAKEN OUT-->
        </td>
      </tr>
      <tr>
        <td>4</td>
        <td>Honors Biology</td>
        <td>Martens</td>
        <td>
          <!--TAKEN OUT-->
        </td>
      </tr>
      <tr>
        <td>5</td>
        <td>Honors English Language Arts</td>
        <td>McCrossen</td>
        <td>
          <!--TAKEN OUT-->
        </td>
      </tr>
      <tr>
        <td>6</td>
        <td>Physical Education</td>
        <td>Lowe</td>
        <td>
          <!--TAKEN OUT-->
        </td>
      </tr>
      <tr>
        <td>7</td>
        <td>Web Design</td>
        <td>Foster</td>
        <td>
          <!--TAKEN OUT-->
        </td>
      </tr>
    </table>
  </div>
  <!--Table End-->
  <!--ROW2 STARTS-->
  <div class="rowtwo">
    <h3>My Top Three Favorite Books and Why</h3>
    <ol>
      <li>The Dragon Inside Series</li>
    </ol>
  </div>
  <div>
    <h5><em>Email Me!</em></h5>
  </div>
</center>
...