个人中心
gpt4 book ai didi

HTML/CSS 正文内容边框

转载 作者：行者123 更新时间：2023-11-28 15:31:31 25 4
gpt4 key购买 nike

我正在尝试在左内容和右内容类周围添加一个完整的边框。

我将标题 h4 的底部边框用作主体的顶部边框，仅仅是因为我喜欢断开连接的外观。

然后我的 .left-content 类上有左边框、右边框和底边框。

我使用右边框和底边框作为“内容分隔符”。

在我的底部边框下方，我想要我的“客户推荐”，然后是我的社交媒体页脚。

但我的问题是，在左侧内容类的左侧和右侧，我有 3% 的填充，以将内容推离边界一点。

然后我尝试向我的 .right-content 类添加 margin-left 和 padding-left 3%，但它根本不受它们的影响，我无法重新创建相同的间距。

所以我的问题是，如何在我的左右内容类周围设置一个完全相同大小的边框？

另外，我如何重新创建 .right-content 类的间距，就像我在 .left-content 类中所做的那样。

非常感谢任何帮助，非常感谢!

另外，我网站上的所有文字都是复制粘贴的。我现在只是为了好玩而构建随机网站，试图了解更多信息。

我的 HTML 和 CSS 代码的 JSFiddle:

https://jsfiddle.net/Lvjz8z8n/

html页面:

<!DOCTYPE html>
<html>
<head>
    <title>Sample</title>
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="main.css">
    <link href="https://fonts.googleapis.com/css?family=Merriweather+Sans" rel="stylesheet">
</head>
<body>
<div class="content">

<!-- site header -->
<header class="main-header">
<img id="spark-logo" src="sparkinc.jpg">
<h4 id="title-quote">The lowest prices anywhere!</h4>
</header>

<!-- left side content -->
<div class="left-content">
<h2 id="left-title">How are we able to keep our prices so low?</h2>
<h3 id="eco-scale">Economies of Scale</h3>
    <p>Economies of scale reduce the per-unit costs without requiring product quality reductions. Larger orders of materials and components come with discounts, as do increases in total shipping. Simple experience in manufacturing a product teaches the business about the process and lets it use those insights to improve efficiency and trim waste, which reduces cost. Hiring expert help, such as managers, and technological improvements, such as new machinery and automation, also improve efficiency and reduce per-unit costs.</p>
<h3 id="eco-scope">Economies of Scope</h3>
    <p>Economies of scope, like economies of scale, also reduce costs, but through production of a wider range of products. Related products often require many of the same materials, creating an incidental economy of scale, and the same machinery to produce them. This allows the business to use the same production facility to make two marketable products, often with a minimal investment. Businesses experience economies of scope in marketing and advertising by promoting a brand or product line, rather than a single product. Vertical supply chain integration – when one business owns multiple pieces of the supply chain -- can create economies of scope through cost reduction and improved management efficiency.</p>
<h3 id="man-system">Institure a Quality Management System</h3>
    <p>Specific quality management systems focus on somewhat different elements. Lean, for example, emphasizes minimizing waste across the organization, while Six Sigma offers a data-driven approach to defect reduction. Quality management systems provide businesses with tested approaches for process improvements, efficiency boosts and cost reduction. Deploying a quality management system helps a business deliver its products at a lower cost, which keeps prices down and still allows the business to offer higher-quality products. In addition to Lean and Six Sigma, popular quality management systems include ISO, total quality management and business process re-engineering.</p>
<h3 id="consideration">Considerations</h3>
    <p>Taking advantage of economies of scale and scope depends on sufficient demand in the marketplace for the product. Scaling up operations, product diversification and acquisition of other businesses only makes sense if doing so promises to deliver a sufficient return on investment. Businesses also need to remain vigilant for diseconomies of scale and scope, in which scaling up production or diversification creates inefficiencies that drive up costs.</p>
</div>

<!-- right side content -->
<div class="right-content">
<h2 id="right-title">So what does this mean for YOU?</h2>
    <p>We pride ourselves on providing the lowest everyday domain prices on the Internet. We are able to offer such low prices due to our focus on domains and nothing else. We do not incur the expensive overhead associated with the infrastructure, staff and promotion of other ancillary services. We do not need to inflate our pricing to cover costs such as expensive celebrity spokespeople, vanity phone numbers, Super Bowl advertising, or non-domain-related technical and support staff. There are certain costs associated with running an effective domain registrar, but we are fanatical about avoiding non-essential expenses which allows us to keep our prices so low. We are in the domain business and no other!

    We also do not utilize the backend platform of any other registrar. Many of our most notable competitors are reliant on systems developed and supported by third-parties. This has many potential problems and drawbacks including having to wait for upgrades, multiple parties being involved in domain disputes and other possible issues, and, most importantly, the fact that third-parties must be paid for their services which inflates the pricing to customers.

    Spending more on a domain elsewhere does not make it better. Registering a domain with us is no different than anywhere else... you register the domain of your choice, for the period of time you want, and we do this like anywhere else - just for less money and no nickel-and-diming for services that should be free!</p>
</div>

<!-- end border div  -->



<!-- testimonials -->
<div class="testimonials-quotes">
<footer id="testimonials">
    <h3>Want more proof of our services?</h3>
    <h4>Just ask our satisfied customers!</h4>
</footer>
</div>
</div>
</body>
</html>

CSS 页面:

  .content {
    margin: 3% 14%;
}

.main-header {
    border-bottom: 1px solid #C7CED1;
}

#spark-logo {
    width: 20%;
    margin-left: 3%;
}

#title-quote {
    font-size: 25px;
    margin-left: 3%;
    padding-bottom: 3%;
    font-family: 'Merriweather Sans', sans-serif;
}

.left-content {
    width: 46%;
    float: left;
    margin-top: 2%;
    border-left: 1px solid #D1E8F0;
    border-bottom: 1px solid #D1E8F0;
    border-right: 1px solid #D1E8F0;
    padding: 0 3% 3%;
}

.left-content h2 {
    font-size: 1.5em;
}

#left-title {
    margin-bottom: 5%;
}

.left-content h3 {
    font-size: 1.2em;
    color: #3E4345;
}

#eco-scale {
    margin-bottom: 2%;
    text-align: center;
}

#eco-scope {
    margin-top: 2%;
    margin-bottom: 2%;
    text-align: center;
}

#man-system {
    margin-top: 2%;
    margin-bottom: 2%;
    text-align: center;
}

#consideration {
    margin-top: 2%;
    margin-bottom: 2%;
    text-align: center;
}

.right-content {
    border-right: 1px solid #D1E8F0;
    margin-top: 2%;
    margin-left: 3%;
}

最佳答案

边框的问题在于它们考虑了边距。如果您希望边框占据整个宽度，则仅需要使用填充。

我相信您正在寻找的是将 float 应用于右侧列，删除边距，添加一些填充，并根据这些计算设置宽度:

.right-content {
  /* margin-left: 3%; */ /* removed */
  float: left;
  width: 41%;
  padding: 0 3% 3%;
  border-bottom: 1px solid #D1E8F0;
}

请记住，一旦您到达“页脚”部分，您还需要清除 float:

.testimonials-quotes {
  clear: both;
}

我创建了一个 JSFiddle 来展示这个 here .

希望对您有所帮助! :)

关于HTML/CSS 正文内容边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44620933/

25 4 0
文章推荐： html - 为什么我的页眉颜色会改变？
文章推荐： javascript - 在更改事件中查找下拉列表中先前选择的值
文章推荐： c++ - 使用来自 Objective C 的 OpenCV decomposeHomographyMat
文章推荐： javascript - 如何将变量传递给嵌套函数？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com