Question

在这个简单的示例中，我需要帮助，该示例旨在了解INLINE-BLOCK相关的布局。很简单：左侧和右侧部分，在右侧部分内部有上下元素。我想要[屏幕宽度减去左侧部分]中心的右侧部分，而右侧内部的h3和p元素则向左对齐。我添加了边框只是为了了解我是否已经充分利用了右侧屏幕的空间。有时我的手被绑住了，所以我不能换HTML，所以我需要纯CSS方法。我确实在这里读过一些类似的问题，但是经过一些测试后，我仍然迷失了----例如，将width：500px赋予正确的部分？但我需要在不同的屏幕上正确输入“ CENTER”！另一个问题：右边的text-align：center也会影响内部元素；内部元素text-align：left也将影响右侧部分。请注意：这是关于inline-block ....和纯CSS的。感谢任何回应。

.left{
display:inline-block;
background:aqua;
}
.right{
border:solid;
display:inline-block;
}

<OCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
        
<div class="whole">
  <div class="left"><p>lefter</p></div>

  <div class="right">
    <h3>upperright</h3>
    <div class="lowerright"><p>sdfsdfsdfsdfsdfsdd</p>
    </div>
  </div>
</div>

</body>
</html>

所附图片显示了我的想法。

Answer 1

已添加

margin-left: 50%;
transform: translatex(-50%);

.right。希望这可以帮助。谢谢

.left {
  display: inline-block;
  background: aqua;
}

.right {
  border: solid;
  display: inline-block;
  margin-left: 50%;
  transform: translatex(-50%);
}

<OCTYPE html>
  <html>

  <head>
    <title></title>
  </head>

  <body>

    <div class="whole">
      <div class="left">
        <p>lefter</p>
      </div>
      <div class="right">
        <h3>upperright</h3>
        <div class="lowerright">
          <p>sdfsdfsdfsdfsdfsdd</p>
        </div>
      </div>
    </div>

  </body>

  </html>

css INLINE-BLOCK div对齐中心，但保持内部元素仍向左对齐

1 个答案: