Невозможно расположить по вертикали все элементы внутри div (1 image 2 span), 2 span должен находиться друг над другом - PullRequest
Новая
       0

Невозможно расположить по вертикали все элементы внутри div (1 image 2 span), 2 span должен находиться друг над другом

0 голосов
/ 08 октября 2018

Здравствуйте, я пытался напрасно несколько дней создать блок элементов в HTML 5 и CSS, в котором есть div, который содержит изображение слева, 2 текста рядом с изображением, который должен быть один сверхудругой - в мобильном представлении, но отвечающий так, что в обычном браузерном представлении они должны быть в одной строке.

Я попытался объединить несколько решений CSS из SO с частичным успехом, и, насколько я понимаю, этоМаксимум, которого я смог достичь 

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  /*not support gradient browsers*/
  background: #002053;
  color: white;
  font-family: sans-serif;
}

ul {
  list-style-type: none;
  padding: 0;
}

.wrapper {
  width: 100%;
  margin: 10 auto;
}

.selected-element {
  height:9rem;
  border-bottom: 0.1rem solid #ccc;
}

.saved-users {
  background-color: rgba(240, 240, 240, 0.3);
}

.segment {
  line-height: 3.5rem;
}

.icon {
  width: 5em;
  height: 5em;
  border-radius: 2.5rem;
  vertical-align:
}

.user-elements {
  font-size: 2.5rem;
}
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/7.0.0/normalize.css">

<body>
  <div class="wrapper">
    <main class="container">
      <section class="saved-users">
        <div class="selected-element" id="freaking-id">
          <img src="https://avatars3.githubusercontent.com/u/12096062?v=4" class="icon">
          <span class="segment">
            <span class="user-elements user-name"> Username </span>
            <span class="user-elements time-stamp">2018-10-05 22:49:41</span>
          </span>
        </div>
        <div class="selected-element" id="second-id">
          <img src="https://avatars3.githubusercontent.com/u/12096062?v=4" class="icon segment">
          <span class="segment"> 
            <span class="user-elements user-name"> Second Username </span>
            <span class="user-elements time-stamp">2018-10-07 22:09:41</span>
          </span>
        </div>
      </section>
    </main>
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 08 октября 2018

Вам нужно использовать медиазапрос CSS для изменения вашего стиля в мобильном представлении.Вы можете проверить это демо: 

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  /*not support gradient browsers*/
  background: #002053;
  color: white;
  font-family: sans-serif;
}

ul {
  list-style-type: none;
  padding: 0;
}

.wrapper {
  width: 100%;
  margin: 10 auto;
}

.selected-element {
  height:9rem;
  border-bottom: 0.1rem solid #ccc;
  line-height: 9rem;
}

.saved-users {
  background-color: rgba(240, 240, 240, 0.3);
}

.segment {
  line-height: 2rem;
  display: inline-block;
  vertical-align: middle;
}

.icon {
  width: 5em;
  height: 5em;
  border-radius: 2.5rem;
  vertical-align: middle;
  display: inline-block;
}

.user-elements {
  font-size: 2.5rem;
}

/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
.segment {
    max-width: 80%;
    line-height: 3rem;
}
.user-elements {
    display: block;
}


}
<!DOCTYPE HTML>
<html lang="en-US">
	<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/7.0.0/normalize.css">
 </head>
<body>
  <div class="wrapper">
    <main class="container">
      <section class="saved-users">
        <div class="selected-element" id="freaking-id">
          <img src="https://avatars3.githubusercontent.com/u/12096062?v=4" class="icon">
          <span class="segment">
            <span class="user-elements user-name"> Username </span>
            <span class="user-elements time-stamp">2018-10-05 22:49:41</span>
          </span>
        </div>
        <div class="selected-element" id="second-id">
          <img src="https://avatars3.githubusercontent.com/u/12096062?v=4" class="icon segment">
          <span class="segment"> 
            <span class="user-elements user-name"> Second Username </span>
            <span class="user-elements time-stamp">2018-10-07 22:09:41</span>
          </span>
        </div>
      </section>
    </main>
  </div>
</body>

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

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

...