Question

我的理解是，只需将float:left添加到具有相对位置的div就会将它们排成一行（从左到右），有点像function showProfile() { var profile = document.getElementById('userprofile'); profile.style.opacity = 0.8; var profileImage = document.getElementById('userimage'); profileImage.style.opacity = 0.8; }。我尝试了两种方法，但它们没有用。

以下是我上次尝试的示例，使用内联显示。我希望所有三个片段从左到右排列，但它们显示就像没有样式的div一样。

.profile {
  top: 68px;
  background-color: #424755;
  color: #dddddd;
  width: 100%;
  min-height: 50px;
  opacity: 0;
  position: fixed;
  font: 16px"Tahoma";
}
.miniProfileImage {
  opacity: 0;
  width: 100px;
  height: 100px;
}
.miniBioSegment {
  display: inline;
  margin-right: 5px;
  width: 33%;
}

<div class="profile" id="userprofile">
  <div class="miniBioSegment">
    <img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
  </div>
  <div id="miniBio" class="miniBioSegment">
    This is basic information about this person that you clicked.
  </div>
  <div id="miniQuote" class="miniBioSegment">
    This is a tag line from the person that you clicked.
  </div>
</div>

<button onclick="showProfile()">View Profile</button>

(reduce #(let [last-v (peek %1)]
           (if (= 2 (last last-v))
             (conj %1 [%2])
             (conj (pop %1) (conj last-v %2))))
        [[]]
        [2 2 0 1 2 3 4 2 2 0 1 2 2])

=> [[2] [2] [0 1 2] [3 4 2] [2] [0 1 2] [2]]

Answer 1

CSS应定位ID并使用float:left。见例子

＆＃13;

    .profile {
      top: 68px;
      background-color: #424755;
      color: #dddddd;
      width: 100%;
      min-height: 50px;
      position: fixed;
      font: 16px"Tahoma";
      
    }
    .miniProfileImage {
      float:left;
      max-width: 33%;
      height: 100px;
    }
    #miniBio {
      float:left;
      margin-right: 5px;
      width: 33%;
    }
    #miniQuote {
      float:left;
      margin-right: 5px;
      width: 33%;
    }

＆＃13;

    <div class="profile" id="userprofile">
      <div class="miniBioSegment">
        <img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
      </div>
      <div id="miniBio" class="miniBioSegment">
        This is basic information about this person that you clicked.
      </div>
      <div id="miniQuote" class="miniBioSegment">
        This is a tag line from the person that you clicked.
      </div>
    </div>

＆＃13;

Answer 2

我问自己，为什么你有position:absolute;？

为了使其有效，我刚刚将display: flex; justify-content: space-between;添加到.profile课程。

删除位置，然后尝试添加最后两行。

请参阅此处的示例：http://sandbox.clickadelic.de/demos/lineup.html

Answer 3

您应该使用内联块而不是内联来进行更多控制。我使用了33％-2px的宽度，因为浏览器将div的大小向上舍入，因此导致溢出。你的5px利润也没有帮助这笔钱。

＆＃13;

function showProfile() {
  var profile = document.getElementById('userprofile');
  profile.style.opacity = 0.8;
  var profileImage = document.getElementById('userimage');
  profileImage.style.opacity = 0.8;
}

＆＃13;

.profile {
  top: 68px;
  background-color: #424755;
  color: #dddddd;
  width: 100%;
  min-height: 50px;
  opacity: 0;
  position: fixed;
  font: 16px"Tahoma";
}
.miniProfileImage {
  opacity: 0;
  width: 100px;
  height: 100px;
  display:inline-block;
}
.miniBioSegment{
  display: inline-block;
  width: calc(33% - 2px);
  vertical-align:middle;
}

＆＃13;

<div class="profile" id="userprofile">
  <div class="miniBioSegment">
    <img class="miniProfileImage" id="userimage" src="http://dummyimage.com/100x100/000088/ffffff.png&text=Profile+image">
  </div>
  <div id="miniBio" class="miniBioSegment">
    This is basic information about this person that you clicked.
  </div>
  <div id="miniQuote" class="miniBioSegment">
    This is a tag line from the person that you clicked.
  </div>
</div>

<button onclick="showProfile()">View Profile</button>

＆＃13;

Answer 4

如果div的总长度不超过容器的宽度，则div设置为display: inline;，它们只会水平排列。

内联元素的width，height被忽略，您应该使用display: inline-block;代替。包装行为与上述相同。

此外，浏览器在内联*元素之间呈现空白，大约为4px，有关详细信息，请参阅How to remove the space between inline-block elements?。

在你的例子中，有3个div，如果你想让它们宽度相等，你可以这样做：

.profile {
  font-size: 0; /*remove whitespace*/
  background: silver;
}
.miniBioSegment {
  font-size: 16px; /*reset font-size*/
  display: inline-block;
  vertical-align: top; /*vertical alignment*/
  width: 33.3333%;
}

但是，第一个div中的图像对象设置为100px，我认为您更喜欢div也是相同的宽度，并且每个div占用其余两个div的剩余空间的50％。例子：

1。内联块

<强> jsFiddle

.profile {
  font-size: 0;
  background: silver;
}
.miniBioSegment {
  font-size: 16px;
  display: inline-block;
  vertical-align: top;
  border: 1px dotted red;
  box-sizing: border-box;
  width: 100px;
}
#miniBio, #miniQuote {
  width: calc((100% - 100px) / 2);
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}

2。浮

<强> jsFiddle

.profile {
  background: silver;
}
.profile:after {
  content: "";
  display: table;
  clear: both;
}
.miniBioSegment {
  float: left;
  border: 1px dotted red;
  box-sizing: border-box;
  width: 100px;
}
#miniBio, #miniQuote {
  width: calc((100% - 100px) / 2);
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}

3。 CSS表

<强> jsFiddle

.profile {
  background: silver;
  display: table;
  border-collapse: collapse;
  width: 100%;
}
.miniBioSegment {
  display: table-cell;
  vertical-align: top;
  border: 1px dotted red;
}
#miniBio, #miniQuote {
  width: 50%;
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}

4。 Flexbox的

<强> jsFiddle

.profile {
  background: silver;
  display: flex;
}
.miniBioSegment {
  border: 1px dotted red;
}
#miniBio, #miniQuote {
  flex: 1;
}
.miniProfileImage {
  width: 100px;
  height: 100px;
  display: block;
}

内联div不排成一排

4 个答案:

1。内联块

2。浮

3。 CSS表

4。 Flexbox的