css中的定位元素

suzh9iv8 于 2023-01-18 发布在其他

关注(0)|答案(2)|浏览(176)

Visualization of what I need to program
对可视化效果上显示的内容进行编程的理想方式是什么？
我需要有h1和一个段落下的h1，h2和一个段落下的h2是在左侧和右侧的图像使用"浮动：右"，但我不能设法使它发生。
还有，我需要这个整个"容器"出现在网页中间，就像它在图像上一样，如果有人能帮忙，我会很高兴。
我设法使整个事情是在屏幕的中心与使用此代码，但我敢肯定，这是不正确的方式这样做。
我将分享我的HTML和CSS-我做了什么，到目前为止，这是我能想出的最接近，但我很肯定这是不正确的方式，它可以做在更正确的方式。例如，我不知道什么是理想的位置，为img标签被放置在。

<div class="container">
<img src="/image.jpg">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At dolore sed quisquam cumque laudantium animi qui culpa? Pariatur rerum tempora similique deleniti, eius perferendis, officia culpa vel aut dolorem porro.</p>
<h2>Heading 2</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatum eligendi sed, laboriosam a doloribus dolor. Et enim rerum mollitia tenetur ducimus magnam assumenda repudiandae fugiat aut laboriosam. Excepturi, quaerat sequi!</p>
</div>

.container{
    background-color: aqua;
    border: 1px black solid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

img{
float: right;
}

当谈到我需要多少个div（一个用于"容器"，一个用于带有标题和段落的左侧，一个用于img？）时，我也不确定如何正确地制作它。目前我只有一个用于容器的div，因为它至少在某种程度上是工作的。
我知道有很多这样的线程，但我已经浏览了一整天，通过互联网，不能使它，所以我在这里。这将是真正的帮助，如果有人能解释什么是最好的编程方式。

css

来源：https://stackoverflow.com/questions/75120315/positioning-elements-in-css

2条答案

按热度按时间

rdrgkggo1#

html{
  height: 100%;
}
body{
  height: 100%;
  outline: 2px dashed red;
  display: flex;
  justify-content: center;
align-content: center;
align-items: center;
}
main {

  display: flex;
  flex-flow: row nowrap;
  outline: 2px dashed blue;
}
section {
  flex: 0 1 auto;
  
}
aside {
  flex: 0 1 auto;
  width: 200px;
  height: 200px;
  background-image: url("https://img.freepik.com/free-vector/astronaut-listening-music-with-headphone-peace-hand-cartoon-vector-icon-illustration-science-technology-icon-concept-isolated-premium-vector-flat-cartoon-style_138676-3375.jpg?auto=format&h=200");
}

<main>
  <section>
    <h1>This is a tes</h1>
    <p>asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf</p>
    <h2>This is another test</h2>
    <p>gwerg werg werg werg werg werg werg werg werg werg werg </p>
  </section>
  <aside>
    
  <aside>
</main>

赞(0）回复(0）举报 2023-01-18

3ks5zfa02#

我已经修改了Ronnie的答案来满足你的要求。记住Flexbox并没有使我们的代码复杂化，相反它使代码更容易，有时它不容易理解，但是一旦你得到了它，你就会爱上Flexbox和Grid CSS。我推荐this guide。

html{
  height: 100%;
}
body{
  height: 100%;
  outline: 2px dashed red;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}
main {
  display: flex;
  flex-flow: row nowrap;
  outline: 2px dashed blue;
}
section {
  float: left;
  display: inline-block;
  margin-right: 25px;
  
}
img {
  float: right;
  display: inline-block;
}

<main>
  <section>
    <h1>This is a test</h1>
    <p>asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf</p>
    <h2>This is another test</h2>
    <p>gwerg werg werg werg werg werg werg werg werg werg werg werg werg werg werg werg werg werg</p>
  </section>
  <img src="https://img.freepik.com/free-vector/astronaut-listening-music-with-headphone-peace-hand-cartoon-vector-icon-illustration-science-technology-icon-concept-isolated-premium-vector-flat-cartoon-style_138676-3375.jpg?auto=format&h=200" />
</main>

赞(0）回复(0）举报 2023-01-18

我来回答

css中的定位元素

2条答案

相关问题

热门标签

最新问答