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

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

}

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
Верстальщик HTML
MST
от 450 $
Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер
BYTIME
от 130 000 ₽
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Консультация по разворачиванию и работы loki и grafana в k8s
28 дек. 2024, в 10:01
1000 руб./за проект
Разработать приложение VPN под windows по протоколу Openvpn
28 дек. 2024, в 09:07
5000 руб./за проект
Разработать лендинг с нуля
28 дек. 2024, в 05:33
100000 руб./за проект
Ещё заказы