Задать вопрос
@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;

}
  • Вопрос задан
  • 84 просмотра
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;

}

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

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать нейросеть
02 мая 2024, в 06:11
30000 руб./за проект
Автоматизация отчетности сектора подбора и развития персонала в 1С
02 мая 2024, в 05:49
7000 руб./за проект
Изменение темы сайта на ghost cms
02 мая 2024, в 04:47
5000 руб./за проект
Ещё заказы