Question

简单地说：

这是我想要以最干净的方式实现的目标。我在这里使用Inuit.css。

它应该非常简单，但填充使它更复杂。

（我认为在这里添加标记并不重要。）

编辑：

我错了。在这里：

<div class="content content--work"> 
  <div class="container--bigger">
    <div class="grid">
      <div class="grid__item one-half">
        <div class="work-main">
          <img src="img/work/timburton-1.svg" alt="">
        </div>
      </div>
      <div class="grid__item one-half">
        <div class="challenge">
          <h3 class="work-title">The challenge</h3>
          I needed to create a strong system.<br>
          Something that would be good enough to generate 7 posters.
        </div>
     </div>
   </div>
 </div><!-- container bigger -->

一半是内联块，占据了容器的一半大小。排水沟是用填料制成的。（边界框）

grid__item {
  display: inline-block;
  padding-left: 30px;
}

one-half {
  width: 50%;
}

*编辑2：*

我想出了this。效果不好。

如果我们调整窗口大小，渐变之间的边界不在交叉点。另外，我试图用渐变来制作它，在我看来效果不是很好。（百分比与固定宽度）

这是css :(相同的HTML）：

.challenge
    background: #f4f0e5
    padding-top: 20px
    padding-bottom: 30px
    vertical-align: top
    padding: 20px
    box-shadow: inset 5px 0 0 #9b9797
    margin-bottom: 20px

.content--work
    background:  #423c3f
    padding-top: 0
    padding-bottom: 0
    background: #423c3f /* Old browsers */
    background: -moz-linear-gradient(left, #423c3f 0%, #423c3f 50%, #f7f5ea 50%, #f7f5ea 100%) /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#423c3f), color-stop(51.1%,#423c3f), color-stop(51.1%,#f7f5ea), color-stop(100%,#f7f5ea)) /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* IE10+ */
    background: linear-gradient(to right, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* W3C */

    .container--bigger
        padding-top: 20px
        background: image-url("work-separation.png") repeat-y 51.5% 60%

此外，根据我正在使用的浏览器

Answer 1

奇怪你会认为添加标记无关紧要。还有什么可能相关？

无论如何，我为你设置了一个可能的解决方案。

我的标记看起来像这样：

<div id='left'>
    <img src='...' />
</div>
<div id='right'>
    <div id="right-content">
        <p>Lorem ipsum</p>
    </div>
</div>

注意右栏内的额外div，我们需要填充你遇到问题。可以通过身体上的简单渐变来实现双色调背景，否则也将处理可能不具有相同高度的列。我的css看起来像这样：

body, html {
    height: 100%;
}
body {
    background: linear-gradient(to right, #753517 50%, #eae7c9 50%);
}
#left, #right {
    float: left;
    width: 50%;
}
#left img {
    float: right;
}
#right-content {
    padding: 0 30px;
}

应该是直截了当的，但随时可以问你是否要我解释一下。并且不要忘记在渐变代码中添加前缀以使其在“所有”浏览器中工作。

要查看一个有效的示例，请看一下： http://jsfiddle.net/Pevara/G2Nzr/

Answer 2

如果你正在使用inuit.css，他们就会内置一个网格系统。您可以看到源代码here。

基本上，您希望使用具有指定宽度的grid__item组合。在您的情况下，标记将是这样的：

<div class="grid">
   <div class="grid__item one-half">
       left half
   </div>
   <div class="grid__item one-half">
       right half
   </div>
</div>

这将创造两个彼此相邻的一半，其间有一个（我相信）16px的阴沟。它们必须包含在grid父div中，以便考虑到这个装订线以及clearfix。

如果您发现项目需要的不仅仅是一半，那么同一系统可以用于三分之四，四分之五，五分之一等。

Answer 3

您将尝试background-clip和box-sizing。像这样：

<div class="grid">
   <div class="grid__item one-half">
       left half
   </div>
   <div class="grid__item one-half">
       right half
   </div>
</div>

css代码：

*{
  box-sizing: border-box;
}
.grid > div {
  width: 50%;
  float: left;
  background: green;
}
.grid > div:nth-child(2){
  padding-left: 30px;
  background: red;
  background-clip: content-box;
}

您需要添加浏览器前缀，例如：-moz - / - webkit - / - o - / - ms-用于background-clip和box-sizing。请查看Demo。

你会试试这个：

<div class="grid">
  <div>left</div>
  <div>right</div>
</div>

css代码：

*{
  box-sizing: border-box;
}
.grid > div{
  background: green;
  width: 50%;
  float: left;
}
.grid div:nth-child(2){
  border-left: 30px solid transparent;
  padding: 0 10px;
  background-color: orange;
  background-clip: padding-box;

}

请查看demo。你将尝试使用css3 calc()函数，如下所示：

.grid > div{
  background: green;
  float: left;
  width: 50%;
}
.grid > div:nth-child(2){
  background: orange;
  float: right;
  width: -moz-calc(50% - 30px);
  width: -webkit-calc(50% - 30px);
  width: -o-calc(50% - 30px);
  width: -ms-calc(50% - 30px);
  width: calc(50% - 30px);
}

请查看demo。

最后有一种方法，你将使用flexbox module。像这样：

<div class="grid">
  <div>left</div>
  <div>right</div>
</div>

css代码：

.grid {
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.grid > div {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex:1;
  width: 50%;
  background: green;
}
.grid > div:nth-child(2){
  margin-left: 30px;
  background: red;
}

请查看demo。

背景分为2（左和右）

3 个答案: