Question

我有一个非常基本的并排布局，我试图实现，但它似乎正在推动元素。

JSFiddle - https://jsfiddle.net/ca616067/1/

.whitebox {            
    background-color: #fff;            
    height: 200px;   
    display: inline-block;        
}

我已经使用;

修复了它

Display:inline-block;
position:relative;
top:-185px;

有没有更好的方法来解决这个问题？

Answer 1

您可以在块级元素上使用#include<stdio.h> #include <sys/mman.h> #include <sys/stat.h> #include <fcntl.h> #include <stdint.h> #include <unistd.h> #include <sys/types.h> #include <stdlib.h> #include <string.h> int main(int argc, char *argv[]) { const char *shpath="/shm_path_for_data"; void *memPtr; shm_unlink(shpath); int fd=0; fd = shm_open(shpath, O_RDWR|O_CREAT|O_EXCL, 0777); if(fd<0) { printf("shm_open failed\n"); return 1; } if((ftruncate(fd, getpagesize())) <0) { printf("Ftruncate failed\n"); return 1; } memPtr = mmap(NULL, getpagesize(), PROT_READ|PROT_WRITE, MAP_SHARED, fd, 0); if(memPtr == MAP_FAILED) { return 1; } strcpy((char *)memPtr, "test input.Just copying something\n"); printf("mapped out: %s\n", (char *)memPtr); }来使它们彼此对齐。

您可以查看此in this fiddle

Answer 2

图片和.whitebox都是同一line box中的内嵌级框。

因此，它们的垂直对齐由vertical-align属性指定：

此属性会影响行框内的垂直定位由内联级元素生成的框。

默认情况下，其值为baseline：

将框的基线与父框的基线对齐。如果框没有基线，将底边边缘对齐父母的基线。

由于图像没有基线，因此其下边距边缘将与.whitebox的基线对齐。该基线根据

计算

'内联块'的基线是其最后一个线框的基线在正常流程中，除非它没有流入线框或如果它的'overflow'属性有一个除'visible'以外的计算值在哪种情况下，基线是底部边缘边缘。

因此，你可以

更改图像和.whitebox的垂直对齐方式，例如

img, .whitebox {
  vertical-align: middle;
}

body {
  background-color: #F2F2F2;
}
h3 {
  font-family: sans-serif;
  text-align: center;
  color: #535353;
}
.forR {
  width: 980px;
  padding-left: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  padding-left: 10px;
}
.inline {
  display: inline;
  position: relative;
}
.whitebox {
  background-color: #fff;
  height: 200px;
  display: inline-block;
}
.box1 {
  width: 737px;
}
img {
  height: 200px;
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}
img, .whitebox {
  vertical-align: middle;
}

<h3>Name</h3>
<div class="forR">
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png">
  <div class="whitebox box1">
    <p class="inline">Name: Matthew</p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
  </div>
</div>

确保.whitebox没有流入内行框，以便.whitebox的基线为其下边距边缘。也就是说，内容应为out of flow：

如果一个元素被浮动，那么它就被称为 out of flow 定位，或是根元素。如果元素被称为 in-flow 不是不流动的。

例如，您可以使用float: left：

.whitebox > * {
  float: left;
}

body {
  background-color: #F2F2F2;
}
h3 {
  font-family: sans-serif;
  text-align: center;
  color: #535353;
}
.forR {
  width: 980px;
  padding-left: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  padding-left: 10px;
}
.inline {
  display: inline;
  position: relative;
}
.whitebox {
  background-color: #fff;
  height: 200px;
  display: inline-block;
}
.box1 {
  width: 737px;
}
img {
  height: 200px;
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}
.whitebox > * {
  float: left;
}

<h3>Name</h3>
<div class="forR">
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png">
  <div class="whitebox box1">
    <p class="inline">Name: Matthew</p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
    <p class="inline"></p>
  </div>
</div>

将overflow的{{1}}设置为与.whitebox不同的值，以便visible的基线为其下边距。

例如，.whitebox：

overflow: hidden

.whitebox {
  overflow: hidden;
}

body {
  background-color: #F2F2F2;
}
h3 {
  font-family: sans-serif;
  text-align: center;
  color: #535353;
}
.forR {
  width: 980px;
  padding-left: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  padding-left: 10px;
}
.inline {
  display: inline;
  position: relative;
}
.whitebox {
  background-color: #fff;
  height: 200px;
  display: inline-block;
}
.box1 {
  width: 737px;
}
img {
  height: 200px;
  width: 200px;
  margin-right: 10px;
  display: inline-block;
}
.whitebox {
  overflow: hidden;
}

Answer 3

当然！在这种情况下，您可以使用下面和this updated fiddle中的CSS float: left;：

.inline {
    display: inline;    
    position: relative;
    float:left;
}

Answer 4

不确定它是什么，但是一旦你用内联类删除了所有段落，它似乎就会自行解决。

<div class="whitebox box1"></div>

http://codepen.io/anon/pen/MwORMe

显示：内联块定位下面的元素

4 个答案: