使元素看起来与我的设计完全一样，并正确对齐

Question

如何使我的元素适合其给定的容器，以便它适合屏幕？我希望我的网站页面“绿色投资”看起来像下面第一张图片中我的画布设计。然而，我得到了下面的第二张图片作为我的结果

正如您所看到的，文本出现在其容器内，但它们太大了。然而，图像及其容器太大，并且太挤在页面右侧，而最顶部的容器包含主标题，“绿色投资”似乎没有保留[标题]。整个布局被不恰当地挤压，并且有点过于不均匀地放大。下面是我正在处理的元素的具体 HTML

<html>
    <head>
        <title>Green Investment</title>
        <link href="file:///C:/xampp/htdocs/templatemo_591_villa_agency/styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div class="green-investment-title">
            <h1>Green Investment</h1>
        </div>
        <div class="green-content">
            <div class="green-text">
                <h2>Profit from the green revolution</h2>
                <p>Reduce your carbon foot print and make a positive impact on the environment and the community by investing in clean and green energy. Bali offers untaped green investment potential as the booming tourism industry draws an international crowd of  environmentally conscious people to the island who not only want to livre a healthy lifestyle being close to nature but also perserve it 

                    Despite the vast potential of being an ecohub the island’s consciousness towards the environment is poorly managed due to a mentality of  unhygienic lifestyle especially relating to waste disposal.  Passed down from generations, the people of Bali are taught that everything used in their daily life are easily disposed of by dumping them out in nature and in public places.  This sort of mentality exists because their ancestors haver grown accustomed to using everyday items made from natural materialks like wood and plant fiber. However times have changed as people use everyday items that are synthetically made that damage nature. Unfortunately the Balinese have not caught up to this change as they are still stuck with the outdated mindset of their ancestors. 
                    
                    This is where you, the investor come in. You can invest in building green businesses like solar farms, recycling plant, public parks and green spaces to instill a mentality of care for motherr nature. By doing this you will improve the island’s green image and gain more clients in thed process. To get updates on new green investments in Bali and other islands indoinesia, subscribe to our newsletter on the right. </p>


            </div>
            <div class="green-image-container">
            <img src="file:///C:/xampp/htdocs/templatemo_591_villa_agency/assets/images/solar%20cells.jpg">
            </div>
        </div>
    </body>    
</html>

下面是特定元素的具体 CSS

.green-investment-title {
    width: 100%;
    height: 45px;
    background-color: #56aeff;
    display:flex;
}

.green-content{
    display: flex;
    flex-direction: row;
}

.green-text {
    justify-content: left;
    text-align: left;
    font-size: 20px;
    font-family: Arial;
}

.green-image-container{
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    border-bottom: 20px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

如果你想查看完整的代码，可以在我的 JS fiddle 上：my JS fiddle

如何确保元素看起来完全像我的设计？有什么工具可以帮忙吗？

我尝试通过添加附加属性（例如对齐每个容器的内容）并为其容器内的文本添加 text-align: left 属性以及更改容器边框的大小来修改我的 CSS，但它没有起作用

Answer 1

你想要的布局很容易实现。首先创建一个使用

parent

的

display: flex

div，它将有助于并排对齐文本和图像，然后添加

children

div。一个用于文本，另一个用于图像，宽度根据您的需要而定，我使用了 60-40% 的宽度比。

这很简单，我添加了一些附加属性，例如

gap: 10px

来在图像和文本之间创建空间。下面是工作示例，如果我错过了什么，请分享。

body {
  margin: 0;
  padding: 0;
}

.mainDiv {
  color: black;
  width: 100%;
  display: flex;
  gap: 10px;
  padding: 20px;
  box-sizing: border-box;
}

.text-div {
  width: 60%;
}

.image-div {
  width: 40%
}

.image-div img {
  width: 100%;
  object-fit: cover;
}

<h2 class="mainDiv">
  <!-- Below Div contain all of your text -->
  <div class="text-div">
    Reduce your carbon foot print and make a positive impact on the environment and the community by investing in clean and green energy. Bali offers untaped green investment potential as the booming tourism industry draws an international crowd of environmentally
    conscious people to the island who not only want to livre a healthy lifestyle being close to nature but also perserve it Despite the vast potential of being an ecohub the island’s consciousness towards the environment is poorly managed due to a mentality
    of unhygienic lifestyle especially relating to waste disposal. Passed down from generations, the people of Bali are taught that everything used in their daily life are easily disposed of by dumping them out in nature and in public places. This sort
    of mentality exists because their ancestors haver grown accustomed to using everyday items made from natural materialks like wood and plant fiber. However times have changed as people use everyday items that are synthetically made that damage nature.
    Unfortunately the Balinese have not caught up to this change as they are still stuck with the outdated mindset of their ancestors. This is where you, the investor come in. You can invest in building green businesses like solar farms, recycling plant,
    public parks and green spaces to instill a mentality of care for motherr nature. By doing this you will improve the island’s green image and gain more clients in thed process. To get updates on new green investments in Bali and other islands indoinesia,
    subscribe to our newsletter on the right.
  </div>
  <!-- Below div will contain your image -->
  <div class="image-div">
    <img src="https://images.pexels.com/photos/28588325/pexels-photo-28588325/free-photo-of-close-up-of-lush-green-prickly-pear-cacti.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
  </div>
</h2>

使元素看起来与我的设计完全一样，并正确对齐

问题描述投票：0回答：1

1个回答

最新问题

使元素看起来与我的设计完全一样，并正确对齐

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1