显示内联块无法正常工作[重复]

问题描述 投票：0回答：1

这个问题在这里已有答案：

任何人都可以帮助我使用与类相关联的显示内联块属性：.header-main。 .header-left和.header-right类元素不显示内联块。我希望我的.header-left和.header-right divs一个接一个地放置。

header {
  margin: 2%;
  background: url('../images/bg.jpg') no-repeat;
  background-size: cover;
  color: #fff;
}

.head {
  background-color: rgba(0, 0, 0, 0.6);
}

.resume div {
  display: inline-block;
}

.resume-logo img {
  height: 40px;
}

.header-main .header-left,
.header-right {
  display: inline-block;
}

.header-left {
  box-shadow: 0 0 10px -3px #2e3d42;
}

.header-left-img {
  background: url('../images/me.jpg') no-repeat;
  background-size: contain;
  height: 263px;
  width: 263px;
}
<body>
  <header>
    <div class="head">
      <div class="container">
        <div class="resume">
          <div class="resume-logo">
            <span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIMSURBVGhD7dm/S1VhHMfxG0KlSVGBSENhtEQkRQQNBkU2FiG1tIUo9Gc0CIGL0VJDOIhEDQ0ViDXkUFBQQ0uI4NYUFEEEhWa9P+IXvhzOPVwPz/N4zecDLy73PA+c87lwnvPjNnI2UfbgbxuZRq38d0W+r37buFxHLqJsySI71j5jJEmRS/iKX7iNboROkiJz0Bwziqrswt4K2mcxSYq8hi8ygmY5gyX4+WXG4ZOkyBv4g9BOm+UoFvCtwhfchE+SIvr1rIR+7eMInSRF9uMzNO+uNkRIkiLKDDTv8uq36vTgcIWD2Aaf6EV6cQu/oXmfMIQOlGUAf6C5VSbgE7XIMH7AH4D5gD4UcwQfsVhBi8EN+EQrsh3zKDsQM4ZQSXaOxE4uYslFAicXsWyJIroKn6rhJHbCRzeTNn4CWt59ohXRjpehsToewaLbmuL4PfhEK6Ltz/G+hnfwV25d7V/Bxt/iGnzyOWLJRQInapF+DLboPHajWfQsb3PPoQs+0Yocwwo01qpnKMsVFOc+gE+0Inql8xAvW/QCOpiyHMJT2NxZ6F2ZTz5HLLlI4EQtchp+ZVqPfbDojclZ2NgFaL8+0Ypo6dX2up7AchXF8Un4RCuiVes+Htfk338dwBRsTDeUF+GTzxFLLhI4uYglFwmcYEV+Qo+fG+UOghRpF7WLdEIXvnahvzJyNkkajX/MPPOkjUNuHwAAAABJRU5ErkJggg=="></span>
          </div>
          <div class="resume-text">
            Resume
          </div>
        </div>
        <div class="container header-main">
          <div class="header-left">
            <div class="header-left-img"></div>
            <div class="header-left-bottom">
              <span class="name">I'm</span>&nbsp;<span>Vishal Mehra</span>
            </div>
          </div>
          <div class="header-right">
            <div class="hello">Hello!</div>
            <div class="header-right-middle">
              I'm <span class="about">19</span>. I live in <span class="about">Uttarakhand, India</span>
            </div>
            <div class="header-right-bottom">
              A beginner in building Software Applications, interested in becoming a Software Developer. Seeking for an opportunity to work in a challenging environment to prove my skills and utilize my knowledge &amp; intelligence in the growth of the organization.
              And also &#34;A Tech Enthusiast&#34;
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</body>
html css css3
1个回答
0
投票

所以，你应该在内部元素上使用display:inline或display:inline-block。

默认情况下，div元素是block。

而inline-block使元素仅占用其内容所需的空间量。在您的代码中，inline-block元素的内容是block元素。

header{
    margin: 2%;
    background: url('../images/bg.jpg') no-repeat;
    background-size: cover;
    color: #fff;
}
.head{
    background-color: rgba(0,0,0,0.6);
}
.resume div{
    display: inline-block;
}
.resume-logo img{
    height: 40px;
}
.header-main .header-left, .header-right, .header-left div, .header-right div{
    display: inline;
}
.header-left{
    box-shadow: 0 0 10px -3px #2e3d42;
}
.header-left-img{
    background: url('../images/me.jpg') no-repeat;
    background-size: contain;
    height: 263px;
    width: 263px;
}
<body>
  <header>
    <div class="head">
      <div class="container">
        <div class="resume">
          <div class="resume-logo">
            <span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIMSURBVGhD7dm/S1VhHMfxG0KlSVGBSENhtEQkRQQNBkU2FiG1tIUo9Gc0CIGL0VJDOIhEDQ0ViDXkUFBQQ0uI4NYUFEEEhWa9P+IXvhzOPVwPz/N4zecDLy73PA+c87lwnvPjNnI2UfbgbxuZRq38d0W+r37buFxHLqJsySI71j5jJEmRS/iKX7iNboROkiJz0Bwziqrswt4K2mcxSYq8hi8ygmY5gyX4+WXG4ZOkyBv4g9BOm+UoFvCtwhfchE+SIvr1rIR+7eMInSRF9uMzNO+uNkRIkiLKDDTv8uq36vTgcIWD2Aaf6EV6cQu/oXmfMIQOlGUAf6C5VSbgE7XIMH7AH4D5gD4UcwQfsVhBi8EN+EQrsh3zKDsQM4ZQSXaOxE4uYslFAicXsWyJIroKn6rhJHbCRzeTNn4CWt59ohXRjpehsToewaLbmuL4PfhEK6Ltz/G+hnfwV25d7V/Bxt/iGnzyOWLJRQInapF+DLboPHajWfQsb3PPoQs+0Yocwwo01qpnKMsVFOc+gE+0Inql8xAvW/QCOpiyHMJT2NxZ6F2ZTz5HLLlI4EQtchp+ZVqPfbDojclZ2NgFaL8+0Ypo6dX2up7AchXF8Un4RCuiVes+Htfk338dwBRsTDeUF+GTzxFLLhI4uYglFwmcYEV+Qo+fG+UOghRpF7WLdEIXvnahvzJyNkkajX/MPPOkjUNuHwAAAABJRU5ErkJggg=="></span>
          </div>
          <div class="resume-text">
            Resume
          </div>
        </div>
        <div class="container header-main">
          <div class="header-left">
            <div class="header-left-img"></div>
            <div class="header-left-bottom">
              <span class="name">I'm</span>&nbsp;<span>Vishal Mehra</span>
            </div>
          </div>
          <div class="header-right">
            <div class="hello">Hello!</div>
            <div class="header-right-middle">
              I'm <span class="about">19</span>. I live in <span class="about">Uttarakhand, India</span>
            </div>
            <div class="header-right-bottom">
              A beginner in building Software Applications, interested in becoming a Software Developer. Seeking for an opportunity to work in a challenging environment to prove my skills and utilize my knowledge &amp; intelligence in the growth of the organization.
              And also &#34;A Tech Enthusiast&#34;
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.