我有一个包含内容的部分,我已经添加了一个背景,我希望内容是在背景里面,不幸的是,我不能得到我想要的。
以下是所期望的视觉效果

以下是我到目前为止所做的工作:http://jsfiddle.net/Mwanitete/8w36hrdk/
这是HTML
<div class="marketing-main-page-content-FAQ">
<div class="marketing-main-page-content-FAQ_header">
<h5>Faq</h5>
<p>Lorem ipsum dolor sit amet, vidit mundi gubergren ne usu, porro evertitur vix et.
.</p>
</div>
<div class="marketing-main-page-content-FAQ_pytanie">
<div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
<a class="pytania" data-toggle="collapse" href="#test-block0" aria-expanded="true" aria-controls="test-block0">
Demo1
</a>
<div id="test-block0" class="collapse">
<div class="card-block">
Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
</div>
</div>
</div>
<div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
<a class="pytania" data-toggle="collapse" href="#test-block1" aria-expanded="true" aria-controls="test-block2">
Demo1
</a>
<div id="test-block1" class="collapse">
<div class="card-block">
Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
</div>
</div>
</div>
<div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
<a class="pytania" data-toggle="collapse" href="#test-block2" aria-expanded="true" aria-controls="test-block">
Demo1
</a>
<div id="test-block2" class="collapse">
<div class="card-block">
Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
</div>
</div>
</div>
<div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
<a class="pytania" data-toggle="collapse" href="#test-block3" aria-expanded="true" aria-controls="test-block">
Demo1
</a>
<div id="test-block3" class="collapse">
<div class="card-block">
Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
</div>
</div>
</div>
<div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
<a class="pytania" data-toggle="collapse" href="#test-block4" aria-expanded="true" aria-controls="test-block">
Demo1
</a>
<div id="test-block4" class="collapse">
<div class="card-block">
Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
</div>
</div>
</div>
<div class="marketing-main-page-content-FAQ_pytanie-card card-0 card">
<a class="pytania" data-toggle="collapse" href="#test-block5" aria-expanded="true" aria-controls="test-block">
Demo1
</a>
<div id="test-block5" class="collapse">
<div class="card-block">
Po kliknięciu w pytanie rozwija się dropdown z odpowiedzią na pytanie, jak klikniemy na
inne to się zwija. Najlepiej, żeby były to max. 2 zdania.
</div>
</div>
</div>
</div>
</div>这是css
.marketing-main-page-content-FAQ {
/* margin-top: 80px; */
padding: 231px 0px;
background-image: url(https://svgshare.com/i/8K7.svg);
background-repeat: no-repeat;
background-size: 150vw;
background-position: right 0;
}
.marketing-main-page-content-FAQ_pytanie {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.marketing-main-page-content-FAQ_pytanie-card {
width: 536px;
height: 132px;
font-family: Roboto;
margin-top: 20px;
font-size: 25px;
text-align: center;
vertical-align: middle;
display: table-cell;
display: flex;
justify-content: center;
align-items: center;
margin-right: 41px;
}
.marketing-main-page-content-FAQ_pytanie {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.marketing-main-page-content-FAQ_header p {
width: 451px;
height: 184px;
font-size: 35px;
font-family: Roboto;
color: #707070;
}
.marketing-main-page-content-FAQ_header {
margin-left: 40px;
}我尝试了不同的组合,但我不能解决这个问题。
我需要做什么才能得到我想要的东西?
发布于 2018-09-17 04:26:07
基本上你只需要给下面的div一个宽度。例如:
.marketing-main-page-content-FAQ {
/* margin-top: 80px; */
padding: 231px 0px;
background-image: url(https://svgshare.com/i/8K7.svg);
background-repeat: no-repeat;
background-size: 150vw;
background-position: right 0;
border: 1px solid red;
width: 500px; //set a width here
}这将使您的所有内容保持在框内,而不会移出盒子。
我已经更新了小提琴:http://jsfiddle.net/8w36hrdk/13/
https://stackoverflow.com/questions/52348718
复制相似问题