Question

我想要的是两个div并排，其中一个是图像，另一个是两个div，一个在另一个之上。

这恰好是Wordpress主题，但是我很确定这是基本的CSS问题。
WordPress堆栈交换告诉我这是题外话。

调用左div #divL和右div #divR。

我找到一个答案，提到我应该将display和#divL中的#divR设置为 inline-block。我可以将其用于隔离创建的测试html文件，但在wordpress标头中不起作用。具体来说，wordpress标头#divL和#divR中的div就像它们具有display: block一样，而不是并排放置。

将它们更改为display: inline会使它们并排放置，但是随后无法在#divR中堆叠两个div。

我将在此处复制Wordpress标头中的一些代码。请注意，我将通过省略#divR内的堆叠div来简化此过程，因为如果不这样做，症状就很明显。

以下是我用来尝试让#divL和#divR并排显示的内容。

#divL { display: inline-block; }
#divR { display: inline-block; }

<header class="site-header">
      <div class="wrap">
        <div class="title-area">
          <div id="divL">
            <img id="logo-img" class="attachment-full size-full">
          </div>
          <div id="divR">Some text that should go on right</div>
        </div>  
        <nav> .... </nav>
      </div>
</header>

但是它们显示在另一个之上。

请注意，这样做确实可以使它们并排，但是 #divR中堆积的div无法正常工作：

  #divL { display: inline; }
  #divR { display: inline; }

<header class="site-header">
    <div class="wrap">
      <div class="title-area">
        <div id="divL">
          <img id="logo-img" class="attachment-full size-full">
        </div>
        <div id="divR">Some text that should go on right</div>
      </div>  
      <nav> .... </nav>
    </div>
  </header>

在这些其他元素上还有很多CSS，但是我不确定哪个对这个问题很重要，所以我将等待有人发表评论并告诉我应该包括什么。

Answer 1

正如我在评论中所写的那样，您应该为这些“ nline-blocks”设置width，基本上应该可以完成您的工作。

但是，您也可以在容器DIV上使用display: flex;。这可以相当简单地完成，但是在下面的代码段中，我添加了一些其他设置来为两个DIV定义一定的宽度，并在水平和垂直方向上将这些DIV中的内容居中（通过使用{{1 }}。有关其余设置，请参见下面的代码。

flex-directon: column

.title-area {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.title-area>* {
  width: 40%;
  border: 1px solid green;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Answer 2

这是一个可行的例子：

<header class="site-header">
  <div class="wrap">
    <div class="title-area">
      <div id="divL">
        <img id="logo-img" class="attachment-full size-full" />
      </div>
      <div id="divR">
        <div id="divTR">Some text that should go on top right</div>
        <div id="divBR">Some text that should go on bottom right</div>
      </div>
    </div>
    <nav>....</nav>
  </div>
</header>

和CSS：

#divL {
  display: inline-block;
  width: 49%;
}

#divR {
  display: inline-block;
  width: 49%;
}

但乔恩·P（Jon P）也正确；您可能需要花一些时间研究动态间隔和调整内容大小的更新方法之一。

在CSS中，显示内联块的作用类似于显示块

2 个答案: