-2

簡単に：


(ソース: d.pr )

これは、可能な限りクリーンな方法を実現したいものです。ここを使って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:*

私はこれを思いつきました。うまくいきません。

ウィンドウのサイズを変更すると、グラデーション間の境界線が交差しなくなります。また、グラデーションで作成しようとしましたが、私の意見ではうまく機能しません。(パーセント vs 固定幅)

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%
  • さらに、使用しているブラウザによって動作が異なります
4

3 に答える 3

0

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;
}

ブラウザの接頭辞を追加する必要があります。デモをご覧ください。

そして、あなたはこれを試します：

<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;

}

Please view the demo. And you will try the css3 calc() function, like this:

.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);
}

Please view the demo.

There is finally a way, you will use the flexbox module. Like this:

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

the css code:

.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;
}

please view the demo.

于 2013-06-12T04:40:34.330 に答える
0

inuit.css を使用している場合、まさにこの目的のためにグリッド システムが組み込まれています。ソースコードはこちらで見ることができます。

grid__item基本的には、指定された幅の の組み合わせを使用したいと考えています。あなたの場合、マークアップは次のようになります。

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

これにより、2 つの半分が隣り合って作成され、その間に 16px のガターが作成されます。gridこのガターと clearfix を考慮して、親 div にラップする必要があります。

プロジェクトの途中で 2 分の 1 以上が必要になった場合は、同じシステムを 3 分の 1、4 分の 1、5 分の 1 などで使用できます。

于 2013-06-11T21:52:51.820 に答える