Текст выходит за пределы Div'a
128
14 декабря 2018, 02:50
Начал изучение языка разметки недавно, и столкнулся с проблемой.
body,p,a {
margin:0;
padding:0;
}
.logo {
width:500px;
height:150px;
background-color: #444;
margin:0;
display: block;
}
.logo-img {
display: block;
width:35%;
height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<header>
<div class="logo">
<img src="https://i.imgur.com/3eR6rb0.png" class="logo-img">
<p class="logo-text">international</p>
</div>
</header>
</body>
</html>Хотелось бы чтобы текст находился в том же Div'e что и картинка,чтобы его можно было редактировать при помощи CSS.
display:inline-block не помогает.
Answer 1
Тег p - блочный элемент, испол. тег span
Для изображения - добавить max-height: XXpx
Пример
* {
box-sizing: border-box;
}
.logo {
border: 1px solid #ccc;
max-width: 500px;
height: 150px;
background-color: #444;
color: #fff;
display: inline-block;
}
.logo-img,
.logo-text {
display: inline-block;
vertical-align: middle;
}
.logo-text {
padding: 15px;
}
.logo-img {
max-height: 150px;
}<div class="logo">
<img src="https://i.imgur.com/3eR6rb0.png" class="logo-img">
<span class="logo-text">international</span>
</div>Answer 2
добавьте float:left в .logo-img.
Чтобы было так:
.logo-img {
display: block;
width:35%;
height: 100%;
float:left;
}
Answer 3
.logo-img {
display: block;
width:35%;
height: 100%;
float: left;
}
-
07:36
-
07:00
-
21:22
-
20:00
-
20:14
-
07:41
-
19:16
-
07:17
-
21:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 46621 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30270 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 22789 visits
- Как через css изменить цвет png изображения? 10157 visits
- Blob video url download 9796 visits
- Php curl запрос через прокси с авторизацией 9054 visits
- Работа с captcha vk api 7972 visits
© "hostciti.net" 18.4.2024 | 22:02