Question

我想做的是使段落文本向左浮动并以明显的边距和填充物环绕图像，并使其对齐，并使图像向右浮动至段落文本。图像应位于右上角容器的侧面和段落应该包裹图像。我已经将图像和段落放置在引导程序的容器div中。我如何实现这种设计？

这是html代码：

#about-us {
  padding: 4em 0;
  background-color: #ffffff;
}

#about-us p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #5a5a5a;
  text-align: justify;
  float: left;
}

#about-us img {
  float: right;
}

<section id="about-us">
  <div class="container">
    <p>Huatai Securities Co.,Ltd. is a leading integrated securities group in China, with a substantial customer base, a leading e-Platform and a highly collaborative full-service business model.</p>
    <p>Huatai Securities was established in May 1991.On February 26, 2010, we were listed at Shanghai Stock Exchange with the stock code of 601688. On June 1, 2015, our H Shares have been listed on The Stock Exchange of Hong Kong Limited with the stock code
      of 6886. Over our more than two decades of operating history, we achieved rapid growth by successfully capitalizing on the transformation and innovation opportunities of China's capital market and securities industry. Our major financial indicators
      and business indicators are among the forefront of the domestic securities industry.</p>
    <p>Currently, Huatai Securities has controlling interests in 3 subsidiaries including Huatai United Securities Co., Ltd., Huatai Futures Co.,Ltd., and Jiangsu Equity Exchange Co., Ltd. We have 4 wholly owned subsidiaries including Huatai Financial Holdings(Hong
      Kong) Limited, Huatai Zijin Investment Co., Ltd., Huatai Innovation Investment Co., Ltd., and Huatai Securities (Shanghai) Asset Management Co., Ltd. We also have minority interests in China Southern Asset Management Co., Ltd., Huatai-PineBridge
      Fund Management Co., Ltd., Bank of Jiangsu Co., Ltd., GP Capital Co., Ltd., and E-Capital Transfer Co., Ltd.</p>
    <p>During recent years, Huatai Securities has focused on providing customers with the full life-cycle integrated financial services. We have built a full-service business model which is led by investment banking, underpinned by brokerage and wealth management
      and supported by asset management as well as investment and trading.</p>
    <p>Huatai Securities has the largest securities brokerage business in China and a leading e-Platform in the industry. We ranked No.1 in terms of brokerage trading volume of stocks and funds in China's securities industry in 2014.As of the end of 2014,
      the number of our securities brokerage accounts ranked No.1 among all China's securities firms; and the balance of our margin loans and securities lent ranked No.2 and the market value of our client entrusted securities ranked No.3 in China's securities
      industry. Our mobile wealth management terminal, “ZhangLe Fortune Path”, was rated No.1 by Sina.com in its review of mobile securities apps in 2014.</p>
    <p>Huatai Securities has a leading comprehensive investment banking franchise and the top M&A advisory business in the industry. In terms of the number of CSRC-approved M&A advised by us, we have been ranked No.1 in the industry for the three consecutive
      years since 2012. In 2014, our equity and debt underwriting businesses also ranked among the top ten securities firms in China, in terms of both value and number of transactions underwritten.</p>
    <p>Huatai Securities also has one of the largest comprehensive asset management businesses in China's securities industry, with leading product innovation capability. The AUM of our collective asset management schemes as of the end of 2014 and the net
      revenue from our asset management business in 2014 ranked No.2 and No.3, respectively, in China's securities industry.</p>
    <p>From now on, we plan to leverage our competitive advantages in the securities business to expand our full-service operations, and aim to become a leading integrated financial group which has a profound impact in Asia-Pacific Market with strong local
      advantages and a global vision.</p>
    <img src="images/about-us.png" alt="">
  </div>
</section>

Answer 1

只需删除该段落的left float属性即可。并将图像放在段落顶部。

#about-us p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #5a5a5a;
  text-align: justify;
}

#about-us img {
  float: right;
}

Answer 2

如果您要在容器右侧顶部制作图片，则需要将直接移到该容器下方。

img {
  float: right;
  margin: 0.5em 0 0.5em 1em;
}

<section id="about-us">
  <div class="container">
    <img src="https://via.placeholder.com/150" alt=""><!-- first child of .container-->
    <p>Huatai Securities Co.,Ltd. is a leading integrated securities group in China, with a substantial customer base, a leading e-Platform and a highly collaborative full-service business model.</p>
    <p>Huatai Securities was established in May 1991.On February 26, 2010, we were listed at Shanghai Stock Exchange with the stock code of 601688. On June 1, 2015, our H Shares have been listed on The Stock Exchange of Hong Kong Limited with the stock code
      of 6886. Over our more than two decades of operating history, we achieved rapid growth by successfully capitalizing on the transformation and innovation opportunities of China's capital market and securities industry. Our major financial indicators
      and business indicators are among the forefront of the domestic securities industry.</p>
    <p>Currently, Huatai Securities has controlling interests in 3 subsidiaries including Huatai United Securities Co., Ltd., Huatai Futures Co.,Ltd., and Jiangsu Equity Exchange Co., Ltd. We have 4 wholly owned subsidiaries including Huatai Financial Holdings(Hong
      Kong) Limited, Huatai Zijin Investment Co., Ltd., Huatai Innovation Investment Co., Ltd., and Huatai Securities (Shanghai) Asset Management Co., Ltd. We also have minority interests in China Southern Asset Management Co., Ltd., Huatai-PineBridge
      Fund Management Co., Ltd., Bank of Jiangsu Co., Ltd., GP Capital Co., Ltd., and E-Capital Transfer Co., Ltd.</p>
    <p>During recent years, Huatai Securities has focused on providing customers with the full life-cycle integrated financial services. We have built a full-service business model which is led by investment banking, underpinned by brokerage and wealth management
      and supported by asset management as well as investment and trading.</p>
    <p>Huatai Securities has the largest securities brokerage business in China and a leading e-Platform in the industry. We ranked No.1 in terms of brokerage trading volume of stocks and funds in China's securities industry in 2014.As of the end of 2014,
      the number of our securities brokerage accounts ranked No.1 among all China's securities firms; and the balance of our margin loans and securities lent ranked No.2 and the market value of our client entrusted securities ranked No.3 in China's securities
      industry. Our mobile wealth management terminal, “ZhangLe Fortune Path”, was rated No.1 by Sina.com in its review of mobile securities apps in 2014.</p>
    <p>Huatai Securities has a leading comprehensive investment banking franchise and the top M&A advisory business in the industry. In terms of the number of CSRC-approved M&A advised by us, we have been ranked No.1 in the industry for the three consecutive
      years since 2012. In 2014, our equity and debt underwriting businesses also ranked among the top ten securities firms in China, in terms of both value and number of transactions underwritten.</p>
    <p>Huatai Securities also has one of the largest comprehensive asset management businesses in China's securities industry, with leading product innovation capability. The AUM of our collective asset management schemes as of the end of 2014 and the net
      revenue from our asset management business in 2014 ranked No.2 and No.3, respectively, in China's securities industry.</p>
    <p>From now on, we plan to leverage our competitive advantages in the securities business to expand our full-service operations, and aim to become a leading integrated financial group which has a profound impact in Asia-Pacific Market with strong local
      advantages and a global vision.</p>
    
  </div>
</section>

Answer 3

尝试删除＃about-us p的float属性，然后将图像标签移动到容器div的顶部，它将起作用。

Dataframe

                                   x         y
SomeDatetime                                  
2019-11-15 13:38:13.885939 -1.106788  1.496731
2019-11-14 13:28:13.885939 -0.478087 -0.819366
2019-11-15 13:43:13.885939  1.985328  0.841495
2019-11-15 13:48:13.885939  0.915070 -0.065473
2019-11-15 14:18:13.885939 -0.726703  0.404896
2019-07-15 13:28:13.885939  0.669062 -0.543737

Day Loop

2019-11-15
                                   x         y
SomeDatetime                                  
2019-11-15 13:38:13.885939 -1.106788  1.496731
2019-11-15 13:43:13.885939  1.985328  0.841495
2019-11-15 13:48:13.885939  0.915070 -0.065473
2019-11-15 14:18:13.885939 -0.726703  0.404896


2019-11-14
                                   x         y
SomeDatetime                                  
2019-11-14 13:28:13.885939 -0.478087 -0.819366


2019-07-15
                                   x         y
SomeDatetime                                  
2019-07-15 13:28:13.885939  0.669062 -0.543737

#about-us {
  padding: 4em 0;
  background-color: #ffffff;
}
#about-us p {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  color: #5a5a5a;
  text-align: justify;
}
#about-us img {
  float: right;
}

Answer 4

好吧，只要您使用bootstrap，就应该将它们与class row一起包装在div中，请参见此处：

<section id="about-us">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <p>Huatai Securities Co.,Ltd. is a leading integrated securities group in China, with a substantial customer base, a leading e-Platform and a highly collaborative full-service business model.</p>
      </div>
      <div class="col-lg-6">
         <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
      </div>
    </div>
  </div>
</section>

这将帮助您根据需要安排它们。如果要使用浮点数，则应将所有段落包装在一个div元素中，将img包装在另一个div元素中，如下所示：

HTMLCode：

<section id="about-us">
  <div class="container">
    <div class="paragraphs">

    <p>From now on, we plan to leverage our competitive advantages in the securities business to expand our full-service operations, and aim to become a leading integrated financial group which has a profound impact in Asia-Pacific Market with strong local
      advantages and a global vision.</p>
    </div>
   <div class="img-container">
      <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
    </div>
  </div>
</section>

CSS代码：

#about-us .container{
  padding: 4em 0;
  background-color: #ffffff;
}

#about-us .paragraphs{
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #5a5a5a;
  text-align: justify;
  float: left;
  width: 50%;
}

#about-us .img-container {
  float: right;
  width: 50%;
}

当然，在第二个示例中，您编写了自己的css。您应该给div的elements和width属性。

另一种方法是使用直接的flexbox，就像他们在bootstrap 4中一样

示例：

#about-us .container{
  padding: 4em 0;
  background-color: #ffffff;
  display: flex;
}

#about-us .paragraphs{
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #5a5a5a;
  text-align: justify;
}

#about-us .img-container {
  // set if you want width of div container
}

希望这将帮助您了解错过要点的地方：）

Answer 5

尝试一下

#about-us {
  padding: 4em 0;
  background-color: #ffffff;
}

#about-us p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #5a5a5a;
}

#about-us img {
  margin:0 0 20px 20px;
  float:right;
}

<section id="about-us">
  <div class="container">
   <img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" alt="">
    <p>Huatai Securities Co.,Ltd. is a leading integrated securities group in China, with a substantial customer base, a leading e-Platform and a highly collaborative full-service business model.</p>
    <p>Huatai Securities was established in May 1991.On February 26, 2010, we were listed at Shanghai Stock Exchange with the stock code of 601688. On June 1, 2015, our H Shares have been listed on The Stock Exchange of Hong Kong Limited with the stock code
      of 6886. Over our more than two decades of operating history, we achieved rapid growth by successfully capitalizing on the transformation and innovation opportunities of China's capital market and securities industry. Our major financial indicators
      and business indicators are among the forefront of the domestic securities industry.</p>
        

    <p>Currently, Huatai Securities has controlling interests in 3 subsidiaries including Huatai United Securities Co., Ltd., Huatai Futures Co.,Ltd., and Jiangsu Equity Exchange Co., Ltd. We have 4 wholly owned subsidiaries including Huatai Financial Holdings(Hong
      Kong) Limited, Huatai Zijin Investment Co., Ltd., Huatai Innovation Investment Co., Ltd., and Huatai Securities (Shanghai) Asset Management Co., Ltd. We also have minority interests in China Southern Asset Management Co., Ltd., Huatai-PineBridge
      Fund Management Co., Ltd., Bank of Jiangsu Co., Ltd., GP Capital Co., Ltd., and E-Capital Transfer Co., Ltd.</p>
    <p>During recent years, Huatai Securities has focused on providing customers with the full life-cycle integrated financial services. We have built a full-service business model which is led by investment banking, underpinned by brokerage and wealth management
      and supported by asset management as well as investment and trading.</p>
    <p>Huatai Securities has the largest securities brokerage business in China and a leading e-Platform in the industry. We ranked No.1 in terms of brokerage trading volume of stocks and funds in China's securities industry in 2014.As of the end of 2014,
      the number of our securities brokerage accounts ranked No.1 among all China's securities firms; and the balance of our margin loans and securities lent ranked No.2 and the market value of our client entrusted securities ranked No.3 in China's securities
      industry. Our mobile wealth management terminal, “ZhangLe Fortune Path”, was rated No.1 by Sina.com in its review of mobile securities apps in 2014.</p>
    <p>Huatai Securities has a leading comprehensive investment banking franchise and the top M&A advisory business in the industry. In terms of the number of CSRC-approved M&A advised by us, we have been ranked No.1 in the industry for the three consecutive
      years since 2012. In 2014, our equity and debt underwriting businesses also ranked among the top ten securities firms in China, in terms of both value and number of transactions underwritten.</p>
    <p>Huatai Securities also has one of the largest comprehensive asset management businesses in China's securities industry, with leading product innovation capability. The AUM of our collective asset management schemes as of the end of 2014 and the net
      revenue from our asset management business in 2014 ranked No.2 and No.3, respectively, in China's securities industry.</p>
    <p>From now on, we plan to leverage our competitive advantages in the securities business to expand our full-service operations, and aim to become a leading integrated financial group which has a profound impact in Asia-Pacific Market with strong local
      advantages and a global vision.</p>
   
  </div>
</section>

如何将我的图片浮动到许多段落的右侧？

5 个答案: