Question

我在容器内部有一个居中的div，我想在中心位置旁边放置另一个元素。

最好的方法是什么（如果可能的话）？

div的宽度由它们包含的文本决定，而不是静态的。

Answer 1

更新（第二）回答：

.div1 {
  position: relative;
  outline: 3px solid red;
  width: 230px;
  height: 200px;
  margin: 0 auto;
}

.div2 {
  position: absolute;
  top: 0;
  left: 105%;
  outline: 3px solid blue;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

<div class="div1">
  div1
  <div class="div2">div2</div>
</div>

Answer 2

这是一个解决方案。具有使第二个div填充所有 容器和第一个div之间的剩余空间的优势。简而言之，它是响应性的。

第一个div的宽度必须小于容器的宽度＆＃39; （或第二个div赢了，显示负宽度）。第一个div的宽度可以是容器%。宽度或可以在px中具有固定宽度（示例3）。

如果您想要第二个div直到容器的最边缘，请从calc：-10px中删除calc(100vw - 100%) / 2)。我只是把它放在那里你可以看到我们没有隐藏多余的东西，我们正在控制宽度。

＆＃13;

body {margin: 0;} 
.container {
  background-color: #e6e6e6;
  position: relative;
  overflow-x: hidden;
}
.container > * {
  color: white;
  padding: 20px;
  margin: 0 auto;
  
}
.first-div {
  background-color: #696;
  position: relative;
  box-sizing: border-box;
  max-width: 60%; /* set default/fallback first div width here - fixed or % */
  margin-bottom: 20px;
}
.second-div {
  left: 100%;
  top: 0;
  margin: 0 0 -20px;
  padding: 20px;
  background-color: #933;
  width: calc(((100vw - 100%) / 2) - 10px);
  position: absolute;
  box-sizing: border-box;
}

＆＃13;

<div class="container">
  <div class="first-div">
    <div class="second-div">Blog truffaut letterpress, austin butcher vinyl aesthetic.  </div>
    <h1>Example 1</h1>
    This div is 60% of container (default, set in CSS). Kale chips banjo hella swag jean shorts. Fixie meh venmo, gastropub disrupt migas 3 wolf moon PBR&B.
  </div>
  
</div>
<hr>
<div class="container">
  <div class="first-div" style="max-width: 30%;">
    <div class="second-div">Freegan you. Skateboard thundercats art party bushwick fashion axe. Tattooed 90's cornhole, flexitarian scenester mixtape pinterest beard fixie pabst.</div>
    <h1>Example 2</h1>
    This div is 30% of container (override by inline styling). Kale chips banjo hella swag jean shorts. Fixie meh venmo, gastropub disrupt migas 3 wolf moon PBR&B. Blog truffaut letterpress, austin butcher vinyl aesthetic. 
    
  </div>
</div>
<hr>
<div class="container">
  <div class="first-div" style="max-width: 400px">
    <div class="second-div">Freegan you. </div>
    <h1>Example 3</h1>
    This div has a fixed width of 400px (inline styling). Kale chips. This div has fixed width, But the second one resizes responsively.
    
  </div>
</div>
<hr>

＆＃13;

Answer 3

这应该是你所需要的。显然，您可以根据需要调整事物的宽度和高度。关键是设置容器内的div显示：inline-block;

我不确定你对html和css有多熟悉，但在这里我使用了外部样式表。如果您愿意，可以使用<style>标记。

如果删除.container中div的宽度，其大小将由其内容决定。

Html

<!DOCtype html>

<html>
<head>
    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="../css/sot.css">
</head>

<body>
    <div class="container">
        <div class="centered-div"></div>
        <div class="other-div"></div>
    </div>
</body>

</html>

CSS

    .container {
    border: 3px solid blue;
    width: 100%;
    height: 500px;
    text-align: center;
}

.container div {
    display: inline-block;
    width: 250px;
    height: 485px;
    margin-top: 3px;
} 

.centered-div {
    position: relative;
    border: 3px solid green;
    margin: auto;
}
.other-div {
    position: absolute;
    border: 3px solid red;
}

如何定位元素相对于居中的兄弟

3 个答案: