html - 我想在右下角和左下角留出间隔,以便使曲线图像更令人满意

标签 html css user-interface user-experience

我想在右下角和左下角留出间距,以便使曲线图像满意。
弯曲的图像是绝对位置的图像,因此我无法将图像下移,因此有什么方法可以在右下角和左下角添加间距。
这是我需要帮助的页面。

http://decorstone.etrafficgroup.com.au/our-process/

我希望此页面看起来像这样的设计

http://decorstone.etrafficgroup.com.au/wp-content/uploads/2019/10/1.jpg

谢谢

最佳答案

您可以使用此代码



.process .left {
  padding: 0 80px 30px 0;
}

.process .right {
  padding: 0 0 30px 80px;
}

<div class="mcb-wrap-inner">
  <div class="column mcb-column one-second column_column process column-margin-" style="height: 475px;">
    <div class="column_attr clearfix" style="">
      <p class="step">01</p>
      <p class="subhead">Source of Material</p>
      <p class="left">All products supplied through the DécoR Stone range are 100% natural stone supplied from stone quarries located in China and Turkey. China – All of our stone cladding and paving products (except Travertine) are sourced from a number of Chinese quarries
        located in the Beijing area. Large blocks of stone are cut from the quarry and transported to the local factory where they are broken down into smaller manageable pieces.</p>
      <img src="./Our Process – Decor Stone_files/center.png" class="center-logo-img">
    </div>
  </div>
  <div class="column mcb-column one-second column_column process column-margin-" style="height: 475px;">
    <div class="column_attr clearfix align_right" style="">
      <p class="step">02</p>
      <p class="subhead">Factory Production</p>
      <p class="right">The stone is cut into the required sizes for the different types of products supplied in the DecoR Stone range.All products are hand assembled ensuring that every item is individual in its appearance. Moulds are used so that accurate sized panels
        are produced. Different sized pieces of stone provide the individual character to each panel produced.The Stacked Stone and Ledge Stone panels are packaged into cartons and packed into wooden crates ready for loading into the containers.</p>
    </div>
  </div>
  <div class="column mcb-column one-second column_column process column-margin-" style="height: 475px;">
    <div class="column_attr clearfix" style="">
      <p class="step">03</p>
      <p class="subhead">Display Boards</p>
      <p class="left">To enable clients to be able to make colour selections of the different products, display boards are provided to resellers for their showrooms and to builders for their clients colour selection centres. Different sized boards are used for each of
        the DécoR Stone product ranges, being made up by the staff in the Head Office warehouse in Burwood (Victoria).</p>
    </div>
  </div>
  <div class="column mcb-column one-second column_column process column-margin-" style="height: 475px;">
    <div class="column_attr clearfix align_right" style="">
      <p class="step">04</p>
      <p class="subhead">Showroom Displays</p>
      <p class="right">The most practical form of display to assist in colour selection is where a larger area of various products are displayed. DécoR Stone has a large display room area at their Highbury Rd, Burwood Head Office where resellers and builders are encouraged
        to direct their potential clients. To encourage resellers to construct displays of DécoR Stone products in their showroom the company provides these display materials at no cost. Individual product samples are also available on request to resellers,
        architects and builders to assist their clients with colour selections.</p>
    </div>
  </div>
</div>

关于html - 我想在右下角和左下角留出间隔,以便使曲线图像更令人满意,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58477113/

相关文章:

java - 我开始学习使用 JFrame 和 JPanel。为什么我的代码不起作用?

css - html5定位——aside, figure, section,

php - 向 Yii2 jui datepicker 添加额外的 css 类

javascript - Tinymce 不保存或提交我的内容

html - 链接处于事件状态时突出显示标题

javascript - 在任何视频上创建 div 叠加层(类似于 YouTube 中的 Google 广告)

java - 对 Swing 对象进行分组

javascript - 在 html 5 Canvas 上添加背景图像

html - 使用CSS将边框变成图像?

wpf - 从进度条中去除光泽?