代码之家 › 专栏 › 技术社区 › JXD

块布局对齐

block layout css html

JXD · 技术社区 · 7 年前

我在试着做块的布局,像这样:
Pattern design

但我明白了: Pattern made with HTML and css

有人知道出了什么问题吗?你真的会帮我的!

加上其他块的所有边框和颜色

下面的代码段

    #blocks {
    font-size: 0; /* To prevent white-space from taking space */
}

.horBlock, .verBlock {
    display: inline-block;
    box-sizing: border-box;
}

.horBlock {
    width: 50%;
    padding-top: 25%;
    vertical-align: top;
}

.verBlock {
    width: 25%;
    padding-top: 50%;
    vertical-align: top;
}

#javaBlock {
    border: 10px solid red;
}
#phpBlock {
    border: 10px solid green;
}
#objective-CBlock {
    border: 10px solid yellow;
}
#CBlock {
    border: 10px solid purple;
}
#pythonBlock {
    border: 10px solid blue;
}
#jsBlock {
    border: 10px solid #FF7F00;
}

<div id="blocks">
  <div class="horBlock" id="javaBlock" onclick="launchInfo(); java();">
    <img src="javaLogo.svg">
  </div>
  <div class="verBlock" id="phpBlock" onclick="launchInfo(); php();">
    <img src="phpLogo.svg">
  </div>
  <div class="verBlock" id="objective-CBlock" onclick="launchInfo(); objectiveC();">
    <img src="objective-CLogo.svg">
                    </div>
  <div class="verBlock" id="CBlock" onclick="launchInfo(); C();">
    <img src="CLogo.svg">
  </div>
  <div class="verBlock" id="pythonBlock" onclick="launchInfo(); python();">
    <img src="pythonLogo.svg">
  </div>
  <div class="horBlock" id="jsBlock" onclick="launchInfo(); js();">
    <img src="jsLogo.svg">
  </div>
</div>

1 回复 | 直到 7 年前

UncaughtTypeError 7 年前

这是一种你真正想要使用的情况 float 特定元素的属性。

创建自己的 实用程序类别 并根据需要将其分配给元素;例如使用特定类 浮动 具有相应类的左或右元素 .alignLeft 和 .alignRight ,例如:

<div class="horBlock alignLeft nestedBlock" id="javaBlock" onclick="launchInfo(); java();">
  <img src="https://placehold.it/200x200">
</div>
<div class="verBlock alignRight nestedBlock" id="phpBlock" onclick="launchInfo(); php();">
  <img src="https://placehold.it/200x200">
</div>

代码段演示:

* {
  box-sizing: border-box;
}

#blocks {
  font-size: 0;
  /* To prevent white-space from taking space */
}

.horBlock,
.verBlock {
  display: inline-block;
  box-sizing: border-box;
}

.horBlock {
  width: 50%;
  padding-top: 25%;
  vertical-align: top;
}

.verBlock {
  width: 25%;
  padding-top: 50%;
  vertical-align: top;
}

#javaBlock {
  border: 10px solid red;
}

#phpBlock {
  border: 10px solid green;
}

#objective-CBlock {
  border: 10px solid yellow;
}

#CBlock {
  border: 10px solid purple;
}

#pythonBlock {
  border: 10px solid blue;
}

#jsBlock {
  border: 10px solid #FF7F00;
}


/* Start Additional */

.alignLeft {
  float: left;
}

.alignRight {
  float: right;
}

.nestedBlock {
  position: relative; /* required to vertically and horizontally align nested img element */
}

.nestedBlock img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

/* End Additional */

<div id="blocks">
  <div class="horBlock alignLeft nestedBlock" id="javaBlock" onclick="launchInfo(); java();">
    <img src="https://placehold.it/200x200">
  </div>
  <div class="verBlock alignRight nestedBlock" id="phpBlock" onclick="launchInfo(); php();">
    <img src="https://placehold.it/200x200">
  </div>
  <div class="verBlock alignRight nestedBlock" id="objective-CBlock" onclick="launchInfo(); objectiveC();">
    <img src="https://placehold.it/200x200">
  </div>
  <div class="verBlock alignLeft nestedBlock" id="CBlock" onclick="launchInfo(); C();">
    <img src="https://placehold.it/200x200">
  </div>
  <div class="verBlock alignLeft nestedBlock" id="pythonBlock" onclick="launchInfo(); python();">
    <img src="https://placehold.it/200x200">
  </div>
  <div class="horBlock alignLeft nestedBlock" id="jsBlock" onclick="launchInfo(); js();">
    <img src="https://placehold.it/200x200">
  </div>
</div>