javascript - 内联 div 没有排成一行

Question

据我了解，只需将 display:inline 添加到具有相对位置的 div 即可将它们对齐(从左到右)，有点像 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;
}

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

Answer 1

您应该使用 inline-block 而不是 inline 以获得更多控制。我使用了 33%-2px 的宽度，因为浏览器将 div 的大小四舍五入，从而导致溢出。您的 5 像素边距也对总和没有帮助。

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

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

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