[英]Flexbox alignment
I'm trying to align the Modern Art Gallery and the text using flexbox but when I do that the whole container moves left and right.我正在尝试使用 flexbox 对齐现代艺术画廊和文本,但是当我这样做时,整个容器会左右移动。 Even more so I want to change the width of the h1 but I'm not sure how to do that.
更重要的是,我想改变 h1 的宽度,但我不知道该怎么做。
Some code may be missing as I'm working on multiple devices but I only need help with the desktop version which is what's shown.当我在多个设备上工作时,一些代码可能会丢失,但我只需要桌面版本的帮助,这就是所显示的。
Here's what I want it to look like:这是我想要的样子:
.container-content { border: 2px solid blue; position: relative; display: flex; justify-content: space-between; gap: 2rem; }.container-content h1 { font-size: 96px; padding: 0; } #tablet-img { display: none; } #desktop-img { display: block; background-color: grey; padding-left: 450px; }.desktop-text-button { border: 2px solid red; position: absolute; margin-left: 1%; } }
<div class="container-flex"> <img id="desktop-img" src="../art-gallery-website/starter-code/assets/desktop/image-hero.jpg" alt="desktop-image"> <div class="container"> <div class="container-content"> <h1>MODERN ART GALLERY</h1> <div class="desktop-text-button"> <p>The arts in the collection of the Modern Art Gallery all started from a spark of inspiration. Will these pieces inspire you? Visit us and find out.</p> <div class="button-1"> <button>Our Location</button> <span class="right-arrow"></span> </div> </div> </div> </div> </div>
Your code was messy so I just recoded it.你的代码很乱,所以我只是重新编码。 Is this what you want?
这是你想要的吗?
.wrapper { display: flex; flex-direction: row; width: 100%; height: 90vh; }.wrapper.left { width: 70%; height: 100%; background-image: url('https://wallpaperaccess.com/full/4707236.jpg'); background-size: cover; border: 1.2px solid #000000; }.wrapper.left p { font-size: 6vw; font-weight: 700; margin-top: 15%; margin-left: 10%; color: #ffffff; }.wrapper.left p span { color: #000000; }.wrapper.right { display: flex; flex-direction: column; column-gap: 2vh; position: relative; right: 7%; width: 30%; height: 40%; margin-top: 10%; }.wrapper.right p { font-size: 2vw; }.wrapper.right button { font-size: 1.6vw; width: 45%; margin-left: auto; margin-right: auto; }
<div class="wrapper"> <div class="left"> <p>MODERN <br /> ART GAL<span>LERY</span></p> </div> <div class="right"> <p>The arts in the collection of the Modern Art Gallery all started from a spark of inspiration. Will these pieces inspire you? Visit us and find out.</p> <button>OUR LOCATION</button> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.