Question

我不是程序员，我一直在努力按照设计构建这个页面，但我很难让它响应。对于桌面我想在左边有一个图像，在同一行右边有一个div。但是，在移动设备上，我希望它是100％并且在彼此之上。除此之外，我希望它们包含在div中，内容不超过1000px。另外，我希望与图像对齐的div也有内部图像和文本。

这就是我的CSS的样子：

.centerdiv{
  width:100%;
  height:100%;
  margin:auto;
  text-align: center;
}
.violet{
  background:#c3c1ea;
  z-index: 1;
  width:100%;
  overflow: hidden;
  display:block;

}
.textondiv{
  padding: 0.5em 3em;
  font-family: 'Futura BT Light', 'Century Gothic';
  font-size: 16px;
  color: #fff;
  text-align:left;
}
.titleviolet {
  z-index: 3;
  margin:auto;
  width: 100%; 
  text-align: center;
}

这是HTML：

<div style="text-align: center;">
  <img src="https:..." />
  <div class="violet">
    <div class="titleviolet"><img src="https:..."/>
      <div class="textondiv">bla bla bla bla</div>
    </div>
  </div>
</div>

（也......我从来没有和.js一起工作，但是我愿意弄清楚如果它变得更容易）我感谢任何帮助，谢谢！

Answer 1

如果您的所有目标设备都支持它，您可以轻松地使用flexbox布局（http://caniuse.com/#feat=flexbox）

我稍微修改了您的代码以使用flex：http://codepen.io/davidkatona/pen/woXjxy

<div class="centerdiv">
  <img class="responsive-image" src="http://placehold.it/350x150" />
  <div class="violet">
    <div class="titleviolet">
      <img src="http://placehold.it/350x150"/>
      <div class="textondiv">
        bla bla bla bla
      </div>
    </div>
  </div>
</div>

.centerdiv{
  width:100%;
  max-width: 1000px;
  height:100%;
  display: flex;
  flex-wrap: wrap;
}

.responsive-image {
  flex-grow: 1;
}

.violet{
  background:#c3c1ea;
  z-index: 1;
  overflow: hidden;
  display:block;
  flex-grow: 1;
}


.textondiv{
  padding: 0.5em 3em;
  font-family: 'Futura BT Light', 'Century Gothic';
  font-size: 16px;
  color: #fff;
  text-align:left;
}

.titleviolet {
  z-index: 3;
  margin:auto;
  width: 100%; 
  text-align: center;
}

请告诉我是否符合您的需求。

另外一个提示：通常最好使用语义类名称，如＆＃34; .main-content-container＆＃34;而不是与设计相关的＆＃34; .violet＆＃34;因为每当你想改变它的背景让我们说蓝色它不会只是一个单行改变，但你必须找到并替换每一次出现的＆＃34;紫＆＃34;在html中的类。

Answer 2

试试这个......

<div style="text-align: center;">
  <img class="responsive-image" src="http://placehold.it/350x150" />
  <div class="violet">
    <div class="titleviolet"><img class="responsive-image" src="http://placehold.it/350x150" />
      <div class="textondiv">bla bla bla bla</div>
    </div>
  </div>
</div>

Answer 3

在centerdiv上使用display inline-flex表示您未能在html上添加的dextop视图。并且还使用img-responsive类进行图像处理。而最重要的是你需要使用媒体查询css为移动设备实现移动视图。 LiveOnFiddle

body{
 margin:0;
 }
.img-responsive {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: auto;
}
.centerdiv {
 display:inline-flex;
  width:100%;
  height: 100%;
  margin: auto;
  text-align: center;
}

.violet {
  background: #c3c1ea;
  z-index: 1;
  width: 100%;
  overflow: hidden;
  display: block;
}

.textondiv {
  padding: 0.5em 3em;
  font-family: 'Futura BT Light', 'Century Gothic';
  font-size: 16px;
  color: #fff;
  text-align: left;
}

.titleviolet {
  z-index: 3;
  margin: auto;
  width: 100%;
  text-align: center;
}
@media only screen and (max-width:768px){
  .centerdiv{
    display:block;
  }
}

<div class="centerdiv">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSipAOtp2qmDZB4Y7N8OE8nixMcnvKDAJvQJhdz1-aa3MX6-i1fcIDGSU-wow" />
  <div class="violet">
    <div class="titleviolet"><img class="img-responsive" src="https://choralista.pl/cfs/files/files/7pGEYN92YG8vyGcEJ/DemoStampRotate01-e1400242575670.png?token=eyJhdXRoVG9rZW4iOiIifQ%3D%3D" />
      <div class="textondiv">bla bla bla bla</div>
    </div>
  </div>
</div>

内联图像和DIV和响应

3 个答案: