Question

我想像标题中所说的那样在一个高度上设置图像和段落。我希望该图像与段落的宽度和高度相同。

主要的问题是，如果我尝试使用我的容器（我真的不知道它是否是容器），则图像位于该段落内。我头疼得很厉害，还没有解决。需要一些帮助。

这是我要创建的页面的代码+图片：

body {
  background-image: url('');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
}

.h1_main {
  text-align: center;
  text-shadow: #06FE35 1px 1px 20px;
  font-size: 50px;
}

.pretty_1 {
  margin-top: 50px;
  text-shadow: grey 1px 1px 15px;
  font-size: 40px;
}

.container {
  border: 7px solid #01FE30;
  margin-right: 75%;
  padding: 20px 30px 20px 30px;
  font-size: 30px;
  text-shadow: #F40752 1px 1px 50px;
  text-align: center;
}

.right_image {
  float: left;
}

.ecorp {
  text-shadow: red 1px 1px 6px;
  text-align: center;
}

.transparent {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
  position: fixed;
  text-align: left;
  bottom: 0px;
  width: 100%;
}

.fsoc {
  font-size: 20px;
  text-shadow: red 2px 0px 0px;
}

.links {
    font-color: black;
    text-shadow: grey 1px 1px 10px;
    text-decoration: none;
    color: black;
    font-size: 26px;
    text-align: center;
}

.center {
  text-align: center;
}

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>MR.Twister</title>
    <link rel='stylesheet' type='text/css' href='podstava.css'>
  </head>
  <body>
    <h1 class='h1_main'>Who is </h1>
    <div class='center'>
      <a href='index.html' class='links'>Main</a>
      <a href='about.html' class='links'>&nbsp;&nbsp;About</a>
      <a href='gallery' class='links'>&nbsp;&nbsp;Galley</a>
    </div>
    <hr>
    <p class='pretty_1'>Wiki Says:</p>
    <p>
      <p class="container"> - - - - - - - - - - - - - - - - - - - - - - - - - - - -<br />
      <small>Hi there Hi there</small></br />
      - - - - - - - - - - - - - - - - - - - - - - - - - - - -   <br />
      You are the best thing to ever happen to me. You are the true definition of a true value. True friendship stands the test of time and you have shown me what it is to have real friends. I value your friendship and I will remain every grateful for your love. Thanks for being my friend. Cheers to our loving friendship.<font color='#6D202C'><small>E</small><small><small>Corp.</small></small></font></p>
    <div class='transparent'>
      <font class='fsoc'color='red'>all rights reserved (c)</font>
    </div>
  </body>
</html>

here is a picture

Answer 1

有很多方法可以完成此操作，但是使用Flex和Grid等最新的CSS3 +属性，可以创建所需的布局。 flex解决方案所需要做的就是将容器指定为width: 100%;以使该容器占据页面的整个宽度，从而允许您自由布局，将其display: flex;设置为使用{{1} }属性并设置flex以使容器内的项目水平对齐。

然后将flex-direction: row;中的右内容和不同的div中的左内容都放在容器内。

参考这个小提琴，我已经修复了您遇到的一些代码问题。另外，请勿将字体标签用作it's not supported in HTML5，而应使用div属性。 https://jsfiddle.net/9oej1z6p/

如何在一个高度[CSS / HTML]上添加单独的文本和单独的图像？

1 个答案: