Как добавить отдельный текст и отдельное изображение на одну высоту [CSS / HTML]? - PullRequest
Новая
       4

Как добавить отдельный текст и отдельное изображение на одну высоту [CSS / HTML]?

0 голосов
/ 23 февраля 2019

Я хочу настроить изображение и абзац на одну высоту, как я сказал в заголовке.И я хочу, чтобы это изображение было одинаковым по ширине и высоте с абзацем.

Основная проблема, если я попытался использовать свой контейнер (я действительно не знаю, является ли он контейнером), изображение попадает внутрь абзаца.Я получил действительно ужасную головную боль и еще не решил ее.Нужна помощь.

Это мой код + изображение страницы, которую я хочу создать: 

body {
  background-image: url('');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
}

.h1_main {
  text-align: center;
  text-shadow: #06FE35 1px 1px 20px;
  font-size: 50px;
}

.pretty_1 {
  margin-top: 50px;
  text-shadow: grey 1px 1px 15px;
  font-size: 40px;
}

.container {
  border: 7px solid #01FE30;
  margin-right: 75%;
  padding: 20px 30px 20px 30px;
  font-size: 30px;
  text-shadow: #F40752 1px 1px 50px;
  text-align: center;
}

.right_image {
  float: left;
}

.ecorp {
  text-shadow: red 1px 1px 6px;
  text-align: center;
}

.transparent {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
  position: fixed;
  text-align: left;
  bottom: 0px;
  width: 100%;
}

.fsoc {
  font-size: 20px;
  text-shadow: red 2px 0px 0px;
}

.links {
    font-color: black;
    text-shadow: grey 1px 1px 10px;
    text-decoration: none;
    color: black;
    font-size: 26px;
    text-align: center;
}

.center {
  text-align: center;
}
 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>MR.Twister</title>
    <link rel='stylesheet' type='text/css' href='podstava.css'>
  </head>
  <body>
    <h1 class='h1_main'>Who is </h1>
    <div class='center'>
      <a href='index.html' class='links'>Main</a>
      <a href='about.html' class='links'>&nbsp;&nbsp;About</a>
      <a href='gallery' class='links'>&nbsp;&nbsp;Galley</a>
    </div>
    <hr>
    <p class='pretty_1'>Wiki Says:</p>
    <p>
      <p class="container"> - - - - - - - - - - - - - - - - - - - - - - - - - - - -<br />
      <small>Hi there Hi there</small></br />
      - - - - - - - - - - - - - - - - - - - - - - - - - - - -   <br />
      You are the best thing to ever happen to me. You are the true definition of a true value. True friendship stands the test of time and you have shown me what it is to have real friends. I value your friendship and I will remain every grateful for your love. Thanks for being my friend. Cheers to our loving friendship.<font color='#6D202C'><small>E</small><small><small>Corp.</small></small></font></p>
    <div class='transparent'>
      <font class='fsoc'color='red'>all rights reserved (c)</font>
    </div>
  </body>
</html>

вот картинка

1 Ответ

0 голосов
/ 24 февраля 2019

Есть много способов сделать это, но используя новейшие свойства CSS3 +, такие как Flex и Grid , вы можете создать макет, который вы хотите.Все, что требуется для гибкого решения, - это указать контейнер на width: 100%;, чтобы контейнер занимал всю ширину страницы, позволяя свободно размещать макет, установите его display: flex; для использования свойства flex и установите flex-direction: row;, чтобы элементы внутри контейнера были выровнены по горизонтали.

Затем разделите правое содержимое в div и левое содержимое в другом div, так как оба находятся внутри контейнера.

Обратитесь к этой скрипке, я исправил некоторые проблемы с кодом, которые у вас есть.Кроме того, не используйте тег шрифта, так как он не поддерживается в HTML5 , вместо этого используйте атрибут style.https://jsfiddle.net/9oej1z6p/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...