Question

容器内有两个元素 - 一个（蓝色）需要保持在左侧，另一个（绿色）相对于外部红色居中。但是，如果屏幕足够小，中心容器（绿色）不能与左侧容器（蓝色）重叠，它应始终保持在蓝色的右侧。有什么想法可以实现吗？如果没有css，那么可能是js？

大屏幕

enter image description here

小屏幕

enter image description here

到目前为止我得到了：

<div class="red">   
    <div class="blue">
        texttexttexttext
    </div>
    <div class="centered">
        Centered Container of fixed width
    </div>    
</div>

.red {
    height: 100px;
    text-align: center;
    border: 3px solid red;
    position: relative;
}
.blue {
    background: blue;
    height: 100%;
    float: left;

}
.centered {
    display: inline-block;
    border: 1px solid green;
    position: absolute;
    left: calc(50% - 70px);
    width: 140px;
    top: 0;
}

这使绿色容器居中，但它在较小的屏幕上与蓝色重叠。

编辑：添加了一些中心标记，以便轻松查看中心

Answer 1

您可以使用绝对居中技术的变体：

.centered {
    position: absolute;
    left: 150px;  /* This is the position of the collision with the obstacle */
    right: 150px; /* Same value as above, in order to center */
    margin: auto; /* This centers */
    width: 140px; /* It needs a width */
}

Demo

此技术仅在障碍物位于左侧而非右侧时才有效。

考虑在容器中添加min-width以防止.centered溢出它。

Answer 2

使用JavaScript，

var blue = document.getElementById('blue'),
    red = document.getElementById('red'),
    centered = document.getElementById('centered');
window.onresize = function() {
    centered.style.left = Math.max(
        blue.offsetWidth,
        (red.clientWidth-centered.offsetWidth) / 2
    ) + 'px';
}

Demo

Answer 3

如果蓝框应具有灵活的宽度，我认为唯一的解决方案是使用JavaScript。

这是你的小提琴的一个分支，它将类更改为id并添加一个window.onresize事件：

http://jsfiddle.net/rf0zLpcs/

window.onresize= function() {
  var blue= document.getElementById('blue');
  var red=  document.getElementById('red');
  var centered= document.getElementById('centered');
  blue.style.width= Math.min(150,(red.offsetWidth-centered.offsetWidth)/2)+'px';
}

Answer 4

根据最佳实践：

首先创建“两个”框，使用“ float：left 或 display：inline-block 将它们放在一行。

现在第二步在每个框中添加更多内容，然后相应地对齐它们。

以下是更新的代码：

<强> HTML

<div class="red">
    <div class="blue"></div>
    <div class="yellow">
        <div class="green">Centered container</div>
    </div>
</div>

<强> CSS

* {
    box-sizing: border-box;
}
html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.red {
    height: 100%;
    width: 100%;
    border: 1px solid red;
}
.blue {
    float:left;
    background: blue;
    width: 200px;
    height: 100%;
}
.yellow {
    float:left;
    border: 1px solid yellow;
    width: 75.5%;
    /* fallback if needed */
    width: calc(100% - 200px);
    height: 100%;
}
.green {
    background-color:green;
    width :200px;
    height:200px;
    margin: 0 auto;
}

这是更新的小提琴：http://jsfiddle.net/cxbtv6z6/3/

Answer 5

试试这个：

fiddle

上的演示

HTML：

<div class="red large">
  <div id="centered">
    Centered container
  </div>
  <div class="blue">
  </div>
</div>

CSS：

.red {
    height: 100px;
    text-align: center;
    max-width: 300px;
    min-width: 130px;
    border: 3px solid red;
}
.blue {
    background: blue;
    width: 50px;
    height: 100px;
    position: absolute;
    top: 11px;
}

#centered {
    position: relative;
    text-align: center;
    width: 80px;
    left: 40%;
}

Answer 6

与@Oriol之前的JS解决方案相同，只是用jQuery包装并在窗口加载时触发，因此它适用于小屏幕启动。（见fiddle）。

var $blue   = $("#blue");
var $red    = $("#red");
var $center = $("#centered");

$(window).on("load resize", function () {
    var minLeft = Math.max(
        $blue.outerWidth(), 
        ($red.outerWidth() - $center.outerWidth()) / 2
    );

    $center.css("left",  minLeft + "px");
});

Answer 7

看起来这是可以在页眉中使用的东西，侧面的项目和中间的标题。所以，我采取了一种非常不同和简单的方法。当宽度不大时，视口居中看起来不太好。使用媒体查询在居中模式之间切换。 Fiddle Demo

#main {
    position: relative;
    overflow: hidden;
    text-align: center;
}
#center {
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 500px) {
    #center {
        position: static;
        transform: none;
    }
}

Answer 8

尝试使用

.red {
    height: 100px;
    text-align: center;
    width: 300px;
    border: 3px solid red;
    position: relative;
}
.blue {
    background: blue;
    position: absolute;
    left: 0;
    top:0;
    width: 50px;
    height: 100%;
}
.centered{
    margin-left: 50px;
}

更新jsfiddle

Answer 9

可能的解决方案是：

<强> HTML ：

<div class="red">   
    <div class="blue">
    </div>
    <div>
    <div class="centered">
        Centered Container of fixed width
    </div>    
</div>
<br/>
The pink and light geen background sides mark centers of the containers. These centers should align until green container meets blue container.

<强> CSS ：

.red {
    height: 100px;
    text-align: center;
    border: 3px solid red;
    position: relative;
    background: linear-gradient(to right, #ffffff 50%,#ffe2e2 50%,#ffe2e2 100%);
}
.blue {
    background: blue;
    width: 150px;
    height: 100%;
}
.centered {
    display:inline-block;
    height: 50px;
    border: 3px solid green;
    position: absolute;
    left: calc(50% - 73px);
    width: 140px;
    top: 0;
     background: linear-gradient(to right, #ffffff 50%,#CDF2DD 50%,#CDF2DD 100%);
}

<强>的jQuery ：

var width = 0;
var sizeBlue = $(".blue").width();

$(window).resize(function() {
    var offset = $(".centered").offset();
    var right = $(window).width()-sizeBlue;
    if (offset.left <= sizeBlue){
        $(".centered").css("left",sizeBlue);
        width = $(window).width()-sizeBlue;
    } else if (right > width){
        $(".centered").css("left","calc(50% - 73px)");
    }
});

点击此链接jsfiddle如何运作。

希望它有用！

中心元素直到遇到障碍物

9 个答案:

根据最佳实践：

这是更新的小提琴：http://jsfiddle.net/cxbtv6z6/3/

fiddle