#html #css #alignment
#HTML #css #выравнивание
Вопрос:
Все форматируется так, как я хочу, за исключением того, что шина находится не в нужном месте. Я бы хотел, чтобы шина двигалась прямо вверх в промежуток, который я оставил рядом с текстом.
Вот его кодовая версия: http://codepen.io/anon/pen/qardrz
<!DOCTYPE html>
<html>
<head>
<title>Home - Duck Duck Grouse</title>
<style>
body {
margin: 0px;
padding: 0px;
}
.banner {
width: 100%;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin-top: -5px;
}
body {
margin: 0px;
padding: 0px;
}
.banner {
width: 100%;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #444;
margin-top: -5px;
}
.navli {
float: left;
width: 25%;
margin-top: 0px;
}
.navli a {
display: block;
color: white;
text-align: center;
padding: 14px 0px;
text-decoration: none;
}
.navli a:hover:not(.active) {
background-color: #333;
}
.activeNav {
background-color: #000;
}
.navli:last-child {
border-right: none;
}
#spike {
width: 40%;
}
#wew {
width: 53%;
margin-left: 3%;
}
</style>
</head>
<body>
<img src="https://i.sli.mg/km2FIO.jpg" class="banner" />
<ul class="navbar">
<li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
<li class="navli"><a class="nava" href="contact.html">Contact</a></li>
<li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
<li class="navli"><a class="nava" href="menu.html">Menu</a></li>
</ul>
<p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here.
Founded in 1969, we import only the finest beans grown by slaves in Africa, and
we run over entire duck families ourselves, ensuring that they are finely crushed,
just to have the freshest roadkill for our famous roast duck recipe. The tires on
our cars have tiny spikes on them, ensuring your meat is finely tenderised before
it even enters the kitchen.</p>
<img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg" />
</body>
</html>
Ответ №1:
Вам нужно создать #wew и #spike иметь свойство css display:inline-block;
body {
margin: 0px;
padding: 0px;
}
.banner {
width: 100%;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin-top: -5px;
}
body {
margin: 0px;
padding: 0px;
}
.banner {
width: 100%;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #444;
margin-top: -5px;
}
.navli {
float: left;
width: 25%;
margin-top: 0px;
}
.navli a {
display: block;
color: white;
text-align: center;
padding: 14px 0px;
text-decoration: none;
}
.navli a:hover:not(.active) {
background-color: #333;
}
.activeNav {
background-color: #000;
}
.navli:last-child {
border-right: none;
}
#spike {
width: 40%;
display:inline-block;
}
#wew {
width: 53%;
margin-left: 3%;
display:inline-block;
} <!DOCTYPE html>
<html>
<head>
<title>Home - Duck Duck Grouse</title>
</head>
<body>
<img src="https://i.sli.mg/km2FIO.jpg" class="banner" />
<ul class="navbar">
<li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
<li class="navli"><a class="nava" href="contact.html">Contact</a></li>
<li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
<li class="navli"><a class="nava" href="menu.html">Menu</a></li>
</ul>
<p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here.
Founded in 1969, we import only the finest beans grown by slaves in Africa, and
we run over entire duck families ourselves, ensuring that they are finely crushed,
just to have the freshest roadkill for our famous roast duck recipe. The tires on
our cars have tiny spikes on them, ensuring your meat is finely tenderised before
it even enters the kitchen.</p>
<img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg"/>
</body>
</html> Ответ №2:
Переместите абзац влево.
body {
margin: 0px;
padding: 0px;
}
.banner {
width: 100%;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
margin-top: -5px;
}
body {
margin: 0px;
padding: 0px;
}
.banner {
width: 100%;
}
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #444;
margin-top: -5px;
}
.navli {
float: left;
width: 25%;
margin-top: 0px;
}
.navli a {
display: block;
color: white;
text-align: center;
padding: 14px 0px;
text-decoration: none;
}
.navli a:hover:not(.active) {
background-color: #333;
}
.activeNav {
background-color: #000;
}
.navli:last-child {
border-right: none;
}
#spike {
width: 40%;
}
#wew {
width: 53%;
margin-left: 3%;
float: left;
} <body>
<img src="https://i.sli.mg/km2FIO.jpg" class="banner" />
<ul class="navbar">
<li class="navli"><a class="activeNav nava" href="mainPage.html">Home</a></li>
<li class="navli"><a class="nava" href="contact.html">Contact</a></li>
<li class="navli"><a class="nava" href="coffee.html">Coffee</a></li>
<li class="navli"><a class="nava" href="menu.html">Menu</a></li>
</ul>
<p id='wew'>"Duck Duck Grouse is really good man" is what people say after dining here.
Founded in 1969, we import only the finest beans grown by slaves in Africa, and
we run over entire duck families ourselves, ensuring that they are finely crushed,
just to have the freshest roadkill for our famous roast duck recipe. The tires on
our cars have tiny spikes on them, ensuring your meat is finely tenderised before
it even enters the kitchen.</p>
<img id='spike' align="right" src="https://i.sli.mg/iu6da6.jpg" />
</body> Кроме того, как только вы это сделаете. Не забудьте добавить пустой div после элемента изображения и добавить clear: both в CSS.
Ответ №3:
align Атрибут не поддерживается в HTML5, и вместо него следует использовать CSS. Вы могли бы использовать символы с плавающей запятой, чтобы изображение справа и текст слева выглядели так.
#spike {
width: 39%;
margin-right: 2%
float: right;
}
#wew {
float: left;
width: 52%;
margin-left: 3%;
}
РЕДАКТИРОВАТЬ: похоже, что align (по крайней мере, в вашем codepen) поддерживается, но align выглядит так, чтобы «очистить» другие выровненные элементы. Изменение display элементов или их плавающее значение должно это исправить.