Задать вопрос
@Elbakidze
html

Как сделать дату и время горизонтально?

Как сделать дату(class="datakrim") и время(class="krimvremia") горизонтально?
index.html:
<!DOCTYPE html>
<html>
<head>
	<title>Новостное агенство</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div id="black-bar">
		<div class="fixed-container">
			Самые <a href="#">свежие новости</a> в реальном времени
			<div id="datetime">12:40 30.03.2021</div>
		</div>
	</div>
	</div>
	<div id="header">
		<div class="fixed-container">
			<img id="logo" src="img/logo.png">
		</div>
		<div class="gorod">
			<a href="#">Москва</a>
		</div>
		<div class="pogoda">
			<img id="oblokoomg" src="img/pogoda.PNG">+22C
		</div>
		<div class="poisk">
			<input type="search" name="q" placeholder="Поиск по сайту" size="35">
		</div>
		<div class="fixed-container">
		<div class="nav">
		<nav>
			<a href="1.html">Главная</a> /
			<a href="2.html">Политика</a> /
       		<a href="3.html">Общество</a> / 
       		<a href="4.html">Экономика</a> /
       		<a href="1.html">В мире</a> /
			<a href="2.html">Проишествия</a> /
       		<a href="3.html">Спорт</a> / 
       		<a href="4.html">Наука</a> /
       		<a href="4.html">Туризм</a>
   		</nav>
   		</div>
   	</div>
	</div>
	<div id="central-container">
		<div class="fixed-container">
		<div id="column-left">
			<h2>Новости дня</h2>
		<div class="news-item">
			<div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
			<div class="news-item-props"><a href="#">/ЧМ по футболу</a>
				<div class="new-item-time">19:00</div>
				<div class="new-comments">17</div>
			</div>
		</div>
		<div class="news-item">
			<div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
			<div class="news-item-props"><a href="#">/ЧМ по футболу</a>
				<div class="new-item-time">19:00</div>
				<div class="new-comments">17</div>
			</div>
		</div>
		<div class="news-item">
			<div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
			<div class="news-item-props"><a href="#">/ЧМ по футболу</a>
				<div class="new-item-time">19:00</div>
				<div class="new-comments">17</div>
			</div>
		</div>
		<div class="news-item">
			<div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
			<div class="news-item-props"><a href="#">/ЧМ по футболу</a>
				<div class="new-item-time">19:00</div>
				<div class="new-comments">17</div>
			</div>
		</div>
	</div>
		<div id="column-center">
			<div class="news-center">
			<div class="politikanews"><a href="#">/ Политика</a></div>
			<div class="krimnews">В Крыму отреагировали на слова Кравчука о возврате полуострова</div>
			<div class="datakrim">19 Июня 2018</div>
			<div class="krimvremia">10:48</div></div>
		</div>

		<div id="column-right">
			<img src="img/banner-1.png">
			<img src="img/banner-2.png">
		</div>
	</div>
	<div class="fixed-container">
		<div id="special-news">
			er text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text ret 
		</div>
	</div>
	</div>
	</body>
</html>


style:
html, body{
	margin:0;
	padding: 0;
	min-width: 1000px;
	font-family: arial;
}

h2{
	font-size: 20px;
	padding: 27px 0 27px 18px;
	margin: 0 0 34px;
	border-bottom: 1px solid #e5e5e5;
}

#black-bar{
	background-color: black;
	color: white;
	padding: 20px 0;
}

#black-bar a{
	color: white;
}

.fixed-container{
	width: 960px;
	margin: 0 auto;
}

.inline-block{
	background-color: yellow;
	padding: 10px;
	width: 70px;
	text-align: right;
	margin-bottom: 10px;
	display: inline-block;
}

#datetime{
	float: right;
}

#logo{
	position: relative;
	top: 40px;
}

.gorod{
	width: 600px;
	margin: 0 auto;
	position: relative;
	top: 10px;
	text-decoration: underline;
  	text-decoration-style: dashed;
}

.pogoda{
	position: relative;
	top: -15px;
	left: 900px;
}

#oblokoomg{
	position: relative;
	top: 6px;
}

.poisk{
	position: relative;
	top: -32px;
	left: 1100px;
}

.nav{
	text-align: center;
}

#column-left{
	background-color: white;
	width: 250px;
	float: left;
}

	.news-item{
		padding-left: 18px;
		margin-bottom: 27px;
		font-size: 14px;
	}

	.news-item-text{
		margin-bottom: 20px;
	}

	.news-item-props a{
		color: #91919f;
	}

	.news-item-props{
		font-size: 12px;
		position: relative;
	}

	.new-item-time{
		position: absolute;
		top: 0;
		left: 120px;
		padding-left: 15px;
		background-image: url(img/icon-time.png);
		background-repeat: no-repeat;
	}

	.new-comments{
		position: absolute;
		top: 0;
		left: 180px;
		padding-left: 15px;
		background-image: url(img/icon-comments.png);
		background-repeat: no-repeat;
	}

#column-center{
	background-image: url(img/1_1_11.jpg);
	width: 420px;
	margin-left: 20px;
	float: left;
	height: 322px;

}

#column-right{
	width: 250px;
	float: right;
}

#column-right img{
	margin-bottom: 20px;
}

#central-container .fixed-container{
	overflow-y: hidden;
}

#central-container{
	padding-top: 20px;
	background-color: #f9f9f9;
	background-image: url(img/central-bg-top.png);
	background-repeat: repeat-x; 
}

#special-news{
	margin-top: 20px;

}

#central-container{
	margin-top: 20px;

}

.news-center{
	padding-left: 20px;

}

.politikanews{
	padding-top: 100px;
	font-size: 12px;
	position: relative;

}

.politikanews a{
	color: #91919f;

}

.krimnews{
	margin-top: 30px;
	font-family: arial;
	font-weight: 600;
	font-size: 20px;
	color: white;
	
}

.datakrim{
	margin-top: 30px;
	position: absolute;
	top: 0;
	left: 180px;


}

.krimvremia{
	position: absolute;
		top: 0;
		left: 120px;
		padding-left: 15px;

}
  • Вопрос задан
  • 87 просмотров
9 комментариев
Подписаться 1 Средний 9 комментариев
Пригласить эксперта
Ответы на вопрос 1
ae_ph
@ae_ph
I'm a owl )
Ваша вёрстка кривая )
У вас был горизонтальный скролл из за class="poisk" и других классов которые стояли на position: relative; и было заданно смещение, так никто не делает, только не в данном случае.
Я её немго поправил, так-же решил вашу проблему с позиционированием..
Дальше сами..

Ваш код
HTML

<html>
<head>
  <title>Новостное агенство</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div id="black-bar">
    <div class="fixed-container">
      Самые <a href="#">свежие новости</a> в реальном времени
      <div id="datetime">12:40 30.03.2021</div>
    </div>
  </div>
  </div>
  <div id="header">
    <div class="fixed-container">
      <img id="logo" src="img/logo.png">
    </div>
    <div class="gorod">
      <a href="#">Москва</a>
    </div>
    <div class="pogoda">
      <img id="oblokoomg" src="img/pogoda.PNG">
      <span>+22C</span>
    </div>
    <div class="poisk">
      <input type="search" name="q" placeholder="Поиск по сайту" size="35">
    </div>
  </div>
      <div class="fixed-container">
    <div class="nav">
    <nav>
      <a href="1.html">Главная</a> /
      <a href="2.html">Политика</a> /
       		<a href="3.html">Общество</a> / 
       		<a href="4.html">Экономика</a> /
       		<a href="1.html">В мире</a> /
      <a href="2.html">Проишествия</a> /
       		<a href="3.html">Спорт</a> / 
       		<a href="4.html">Наука</a> /
       		<a href="4.html">Туризм</a>
   		</nav>
   		</div>
   	</div>
  <div id="central-container">
    <div class="fixed-container">
    <div id="column-left">
      <h2>Новости дня</h2>
    <div class="news-item">
      <div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
      <div class="news-item-props"><a href="#">/ЧМ по футболу</a>
        <div class="new-item-time">19:00</div>
        <div class="new-comments">17</div>
      </div>
    </div>
    <div class="news-item">
      <div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
      <div class="news-item-props"><a href="#">/ЧМ по футболу</a>
        <div class="new-item-time">19:00</div>
        <div class="new-comments">17</div>
      </div>
    </div>
    <div class="news-item">
      <div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
      <div class="news-item-props"><a href="#">/ЧМ по футболу</a>
        <div class="new-item-time">19:00</div>
        <div class="new-comments">17</div>
      </div>
    </div>
    <div class="news-item">
      <div class="news-item-text">Кот Аххил предсказал поражение сброной Египта на чемпионате по футболу.</div>
      <div class="news-item-props"><a href="#">/ЧМ по футболу</a>
        <div class="new-item-time">19:00</div>
        <div class="new-comments">17</div>
      </div>
    </div>
  </div>
    <div id="column-center">
      <div class="news-center">
      <div class="politikanews"><a href="#">/ Политика</a></div>
      <div class="krimnews">В Крыму отреагировали на слова Кравчука о возврате полуострова</div>
      <div class="datakrim">19 Июня 2018</div>
      <div class="krimvremia">10:48</div></div>
    </div>

    <div id="column-right">
      <img src="img/banner-1.png">
      <img src="img/banner-2.png">
    </div>
  </div>
  <div class="fixed-container">
    <div id="special-news">
      er text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text ret 
    </div>
  </div>
  </div>
  </body>
</html>



CSS

html, body{
  margin:0;
  padding: 0;
  min-width: 1000px;
  font-family: arial;
}
#header {
  margin-top: 15px;
  margin-bottom: 15px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

h2{
  font-size: 20px;
  padding: 27px 0 27px 18px;
  margin: 0 0 34px;
  border-bottom: 1px solid #e5e5e5;
}

#black-bar{
  background-color: black;
  color: white;
  padding: 20px 20px;
}

#black-bar a{
  color: white;
}

.fixed-container{
/*   width: 960px; */
/*   margin: 0 auto; */
}

.inline-block{
  background-color: yellow;
  padding: 10px;
  width: 70px;
  text-align: right;
  margin-bottom: 10px;
  display: inline-block;
}

#datetime{
  float: right;
}

#logo{
  position: relative;
  top: 40px;
}

.gorod{
/*   width: 600px; */
/*   margin: 0 auto; */
/*   position: relative; */
  top: 10px;
  text-decoration: underline;
  	text-decoration-style: dashed;
}

.pogoda{
/*   position: relative; */
/*   top: -15px; */
/*   left: 900px; */
  display: flex;
  align-items: center;
}

#oblokoomg{
  position: relative;
  top: 6px;
}

.poisk{
/*   position: relative;
  top: -32px; */
/*   left: 1100px; */
}

.nav{
  text-align: center;
}

#column-left{
  background-color: white;
  width: 250px;
  float: left;
}

  .news-item{
    padding-left: 18px;
    margin-bottom: 27px;
    font-size: 14px;
  }

  .news-item-text{
    margin-bottom: 20px;
  }

  .news-item-props a{
    color: #91919f;
  }

  .news-item-props{
    font-size: 12px;
    position: relative;
  }

  .new-item-time{
    position: absolute;
    top: 0;
    left: 120px;
    padding-left: 15px;
    background-image: url(img/icon-time.png);
    background-repeat: no-repeat;
  }

  .new-comments{
    position: absolute;
    top: 0;
    left: 180px;
    padding-left: 15px;
    background-image: url(img/icon-comments.png);
    background-repeat: no-repeat;
  }

#column-center{
  background-image: url(img/1_1_11.jpg);
  width: 420px;
  margin-left: 20px;
  float: left;
  height: 322px;

}

#column-right{
  width: 250px;
  float: right;
}

#column-right img{
  margin-bottom: 20px;
}

#central-container .fixed-container{
  overflow-y: hidden;
}

#central-container{
  padding-top: 20px;
  background-color: #f9f9f9;
  background-image: url(img/central-bg-top.png);
  background-repeat: repeat-x; 
}

#special-news{
  margin-top: 20px;

}

#central-container{
  margin-top: 20px;

}

.news-center{
  padding-left: 20px;

}

.politikanews{
  padding-top: 100px;
  font-size: 12px;
  position: relative;

}

.politikanews a{
  color: #91919f;

}

.krimnews{
  margin-top: 30px;
  font-family: arial;
  font-weight: 600;
  font-size: 20px;
  color: white;
  
}

.datakrim{
  margin-top: 30px;
  position: absolute;
  top: 0;
  left: 180px;


}

.krimvremia{
  position: absolute;
    top: 0;
    left: 120px;
    padding-left: 15px;

}

Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать бэкап сайта(форума) и установить его на сервер
23 нояб. 2024, в 04:31
2000 руб./за проект
Смонтировать видео
23 нояб. 2024, в 01:31
1000 руб./за проект
Настроить сайт
23 нояб. 2024, в 00:16
2000 руб./за проект
Ещё заказы