html - 显示内联 block 不起作用-6ren

html - 显示内联 block 不起作用

转载作者：行者123 更新时间：2023-11-28 02:04:51

26

4

This question already has answers here:

Aligning two divs side-by-side [duplicate]

                                    （6个答案）


                                2年前关闭。


谁能帮我解决与以下内容相关联的显示内联块属性
元素的类：.header-main。 .header-left和.header-right类元素未显示内联块。我希望将.header-left和.header-right div依次放置。

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>

最佳答案

因此，您也应该在内部元素上使用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>

关于html - 显示内联 block 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49084967/

上一篇：html - Bootstrap 按钮内的 muli 元素 - 按钮变形

下一篇：html - 将标题中心的 Logo + h2 与响应行为对齐

相关文章：

javascript - 使用ajax上传图片并显示给用户

css - 通过 IE7 访问时将用户重定向到消息页面

javascript - 谁用 Jquery Ajax 附加 php onchange

javascript - 如何将文本转换为 css 十六进制值？

javascript - 需要干净 chop 文本以显示更多 - 更少

html - 如何添加新元素以实现 css 集合？

html - 使用Bootstrap/CSS做pinterest风格布局，帖子不会落在上面帖子的正下方

css - 如何从弹出窗口中删除背景控件？

html - 用户代理样式表覆盖表？

javascript - 如何让其他网站可以访问我的 iframe 的 javascript？

26

4

0

文章推荐： javascript - 在 AngularJS 中只运行一次某些代码

文章推荐： c# - 在 winrt/xaml/c# 应用程序中动态评估 JavaScript 表达式

文章推荐： javascript - xulrunner 调用外部 javascript

blockly - 在 blockly block 中读取用户输入的输入
我的 blockly.js 文件中有以下代码 Blockly.Blocks['account_number'] = { // Other type. init: function() {
Android将图像分成几 block 并获得等效大小的图像 block ( block )
首先抱歉我的英语不好，我正在开发 Image Splitter 应用程序并且已经完成，但是现在的要求是当图像被分割(分成几 block /chunks)那么图像 block 的每一 block (ch
block - smalltalk block - 我可以显式设置返回值并停止执行 block 吗？
#value: 消息的返回值，当发送到一个 block 时，是该 block 中最后一句话的值。所以 [ 1 + 2. 3 + 4. ] value 计算结果为 7。我发现有时很难使用。有没有办法显式
css - 当一个 block 高于其他 block 时，内联 block 对 block 应用顶部效果
我想构建一个包含 3 div 的响应式导航栏相同的 width和 height . 我申请了 inline-block到每个 block ，我得到一个我不理解的行为。问题是，第三 block 由 2
blockly - Blockly 有文件选择器吗？
我希望使用 Blockly 来允许非技术人员用户指定测试脚本。它的一部分需要一个文件选择器，但是，我看不到 Blockly 有一个。是吗？实际上，我找不到完整的标准 block 列表。谁有网址？
reactjs - 有没有办法在父 block 中知道您正在编辑该父 block 的内部 block ？
仅当您位于父 block 内部时，父 block 的 props.isSelected 才为 true，但当您在该 block 的 innerBlocks 内进行编辑时则不然。如何从父 block
reactjs - 有没有办法在父 block 中知道您正在编辑该父 block 的内部 block ？
仅当您位于父 block 内部时，父 block 的 props.isSelected 才为 true，但当您在该 block 的 innerBlocks 内进行编辑时则不然。如何从父 block
html - 我想创建一个具有不同背景颜色 block 和不同悬停颜色 block 的导航栏 block
我想创建一个具有不同背景颜色 block 和不同悬停颜色 block 的导航栏 block 。我可以分别创建不同的悬停颜色 block 或不同的背景颜色 block ，但不能一起创建。所以请告诉我如何
ios - block 指针变量 'block' 在被 block 捕获时未初始化
我正在使用看到的代码 here定期执行代码: #define DELAY_IN_MS 1000 __block dispatch_time_t next = dispatch_time(DISPATC
ios - 为什么必须复制 block 而不是保留 block ？什么时候不需要复制 block ？
为什么 block 必须被复制而不是保留？两者在引擎盖下有什么区别？在什么情况下不需要复制 block (如果有)？最佳答案通常，当您分配一个类的实例时，它会进入堆并一直存在，直到它被释放。但是，
ios - block block block ，用 __weak self
我想弄清楚我这样做是否正确: 如果我有一个 block ，我会这样做: __weak MyClass *weakSelf = self; [self performBlock:^{
javascript - 当单击部分中的每个 block 时，显示一个 block ，同时使用 jquery 隐藏其他 block 出现第二个 block ，第三个和第四个
我想制作一个 4 block 导航菜单，虽然我已经显示了一个 block ，然后单击打开第二个 block ，从第二个开始选择并再次单击出现第三个 block ，第四个 block 相同...这是我的
java - 最好在 try block 内有一个同步块(synchronized block)，还是在同步块(synchronized block)内有一个 try block ？
例如，这样更好吗？ try { synchronized (bean) { // Write something } } catch (Int
simulation - 尝试检查前方色 block 并根据前方色 block 的色 block 颜色做出决定
我想让一只乌龟检查前方小块的颜色并决定移动到哪里。如果前面的补丁不是白色的，那么乌龟向左或向右旋转并移动。我的 If 决策结构中出现错误，显示“此处应为 TRUE？FALSE，而不是 block 列表
在 block 矩阵的对角部分重复 block 矩阵多次，非对角 block 全部为零矩阵？
我想创建一个 block 对角矩阵，其中对角 block 重复一定次数，非对角 block 都是零矩阵。例如，假设我们从一个矩阵开始: > diag.matrix [,1] [,2] [
blockchain - 如何通过区 block 号访问以太坊区 block 链上一个区 block 的数据？
我是区 block 链新手。突然我有一个问题，我们是否可以通过区 block 号来访问以太坊区 block 链上之前的区 block 数据。例如我创建了一个block1、block2。 block
blockchain - 如何通过区 block 号访问以太坊区 block 链上一个区 block 的数据？
我是区 block 链新手。突然我有一个问题，我们是否可以通过区 block 号来访问以太坊区 block 链上之前的区 block 数据。例如我创建了一个block1、block2。 block
game-engine - 如何在不与其他图 block 重叠的情况下将等距对象从一个图 block 过渡到另一个图 block
我创建了一个等距环境，全部使用 Javascript 和 HTML5 (2D Canvas)，大部分情况下工作正常。我面临的问题是使用不同高度的图 block ，然后对图 block 上的对象索引进行
java - 如果try block 中有 "Where (true)" block ，是否会到达finally block ？
这是令我困惑的代码: public Integer getInteger(BlockingQueue queue) { boolean interrupted = false; try
c# - TPL 数据流转换 block 发布到批处理 block ，然后是操作 block
我有一个基于 TPL 数据流的应用程序，它仅使用批处理 block 和操作 block 就可以正常工作。我已经添加了一个 TransformBlock 以尝试在发布到批处理 block 之前从源中转

首页

博学

6Ren·AI

商城

html - 显示内联 block 不起作用