Html 在引导转盘周围放置框架_Html_Css_Twitter Bootstrap

Html 在引导转盘周围放置框架

html css twitter-bootstrap

Html 在引导转盘周围放置框架,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,有一些插件可以做到这一点，但我确信一定有一种更简单的方法我有一个帧png，它在帧图像的内部和外部都是透明的我有一个自助旋转木马我想把框架放在传送带的顶部。我希望它们在调整浏览器大小时同时缩放如何简单地将一个div嵌套在另一个div中 HTML: 您是否需要在所有图像周围使用边框？您可能会在旋转木马周围创建一个div，其中包含您希望用于帧的css。因此，一个解决方案是将父div的位置设置为相对，然后在父div中设置两个图像，重叠的一个设置为相对位置，而下图像设置为绝对位置，您将需要在父di

有一些插件可以做到这一点，但我确信一定有一种更简单的方法

我有一个帧png，它在帧图像的内部和外部都是透明的

我有一个自助旋转木马

我想把框架放在传送带的顶部。我希望它们在调整浏览器大小时同时缩放

如何简单地将一个div嵌套在另一个div中

HTML:

您是否需要在所有图像周围使用边框？您可能会在旋转木马周围创建一个div，其中包含您希望用于帧的css。

因此，一个解决方案是将父div的位置设置为相对，然后在父div中设置两个图像，重叠的一个设置为相对位置，而下图像设置为绝对位置，您将需要在父div上设置最大高度和宽度，以便为其提供某种约束：就像这样

编辑：在jsfiddler示例中为.middle constraint添加了边框和受限父div

我不确定这个设置是否能很好地与您的旋转木马配合使用，因此您需要使用它。您的正面图像至少需要是

另一种选择是将旋转图像设置为css中的背景图像，将透明图像设置为html中的图像，但我确信这会在不进行任何严重修改的情况下扼杀旋转木马的功能。

查看您的帧，我将使用border:10px solid 000作为图像是的，我正在旋转木马周围使用div，但当我把一个img放在沙发上时，旋转木马就在它下面。我可以使用z-index将帧浮动在顶部，但我无法将其正确定位或选择底部的旋转木马。您是否有代码示例以及如何添加帧div？编辑问题以包含代码-文本来自特朗普语音生成器-比Lorem Ipsum更好！好的，谢谢你的帮助。flexbox和position:absolute的组合似乎不起作用。我需要flexbox，所以我找到了一种使用相同嵌套div方法的方法，但是使用了justify content:center和align self:center。不幸的是，这不是一个完整的解决方案，因为现在我的角度工具栏有问题，但这是一个单独的问题，我将发布另一个问题。将此标记为您的修复

<body>
<div flex layout="column" class="outer">
    <div class="top">
        <span class="left-spacer"></span>
    <span class="page-header">
        ART
    </span>
    </div>
    <div class="middle">
        <div class="middle-constrained">
            <div>
                <img class="artFrame" src="{{artFrame}}">
                <app-image-slider></app-image-slider>
            </div>
        </div>
    </div>
    <span class="artSpacer"></span>
    <div class = "artTextboxes">
        <span class="artText">
                “Oh, well, okay, I’ll say, “Congratulations. That’s what we have here. I mean, the press. I don’t care. All Americans living here and for the country will be further destroyed. So we get nothing. What do we have."
        </span>
        <span class="artText">
                "Now, Ford announces a few weeks ago. And I come in from different places. I go to China. They are building other candidates, they literally do whatever the hell kind of energy it is – I don’t want it.”
        </span>
        <span class="artText">
                “I mean – and no matter where we go we fill up the Second Amendment, and leaving only the bad guys and terrorists with guns. No good. Not good.""
        </span>
    </div>
    <span class="artSpacer2"></span>
</div>
</body>

@import url('https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade');
@import url('https://fonts.googleapis.com/css?family=Anton|Fjalla+One|Karla');

body {
    display: flex;
}

.outer {
    display: flex;
    flex-direction: column;
    background-color: #5BC8AF;
}

.top {
    flex: 1;
    order: 1;
    display: flex;
    justify-content: flex-center;
}

.left-spacer {
    flex-basis: 95%;
    background-color: #5BC8AF;
}

.page-header {
    padding: 0px;
    background-color:  #5BC8AF;
    flex: 1;
    height: 4vh;
    margin-right: 20px;
    margin-bottom: 5px;
    font-family: 'Bungee', cursive;
    font-size: 2em;
    vertical-align: middle;
    color: #B6DBDE;
 }

 .middle {
    order: 2;
    display: flex;
    overflow:hidden;
    flex-wrap: wrap;
    background-image: url('Melanie.png');
    background-color: rgba(255,153,153,0.6);
    background-blend-mode: lighten;

 }


 .middle-constrained {
    flex-basis: 30%;
    order: 2;
    display: flex;
    align-content: stretch;
    flex-direction: row;
    flex: 1;
    flex-wrap: wrap;
 }

  .artFrame {
    flex: 1;
 }

 .artSpacer {
    order: 3;
    height: 500px;
 }

  .artSpacer2 {
    order: 5;
    height: 500px;
 }

 .artTextboxes {
    order: 4;
    display: flex;
 }

 .artText {
    flex-basis: 33%;
    height: 200px;
    margin: 20px;
    padding: 30px;
    font-family: 'Karla', sans-serif;
    font-size: 1.2em;
    line-height: 2;
    text-align: justify;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color:  #B6DBDE;
    color: #67327A;
    border-radius: 10px;
 }

 .artText:nth-child(2) {
    background-color: #A7D3D7;
 }

 .artText:nth-child(3) {
    background-color: #99CCD1;
 }


app-image-slider {

    flex:1 ;
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
}

        <div class="parentOver">
            <img class="artFrame" src="https://www.mantidproject.org/images/c/ce/Mocking.jpg">
            <img class="overlapImg" src="https://www.transparenttextures.com/patterns/debut-light.png">
            <app-image-slider></app-image-slider>
        </div>

.artFrame {
flex: 1;
position: absolute;
top: 0;
left: 0;
}

.overlapImg {
position: relative;
top: 0;
left: 0;
}

.parentOver {
 position: relative;
 top: 0;
 left: 0;
 max-height: 300px;
 }