Question

我正在使用aspx生成一个html页面。从本质上讲，我使用LinkButtons，其中包含图像和标签，作为导航菜单的链接。

当我在html中查看页面时，我得到了一个div，其中包含一个图像和一个跨度。然后文本环绕图像本身，因为宽度不足以使文本可以一次显示。

我已经阅读了一些其他问题，例如：Stopping text from wrapping around image处理这个并且它适用于其中一个图像，但是一旦我尝试将这些方法用于所有导航项目，我就遇到了问题浮动左移动图像和它们的文本为每个图像右侧（因此第二个图像比第一个图像更右，....）。这适用于文本保持在图片右侧的版本。在大多数情况下，它不起作用。

这里的问题可能更复杂的是包含菜单（#MenuDiv）的div具有绝对位置，我动态地（通过添加/删除类）改变到固定位置并返回（当菜单向上滚动屏幕时当它处于最顶端位置时，保持固定）。

如前所述，MenuDiv不是很宽（约100像素宽，图像占用24）

作为示例代码

<div id="MenuDiv">
    <div id="menuItem1">
        <image  style="width: 24px; height: 24px;" />
        <span>This is a long menu text for testing</span>
    </div>
    <div id="menuItem2">
        <image  style="width: 24px; height: 24px;" />
        <span>Short text</span>
    </div>    
    <div id="menuItem3">
        <image  style="width: 24px; height: 24px;" />
        <span>This is a long menu text for testing</span>
    </div>        
</div>

MenuDiv具有以下css统计数据。

#MenuDiv {
    position: absolute;
    top: 50px;
    left: 30px;
    width: 100px;
}

#MenuDiv.FixedPosition {
    position: fixed;
    top: 0px;
    left: 30px;
    width: 100px;
}

我的目标是每个导航项目都有图像右侧的文本，因此我的问题是如何实现这一点（同时实现每个图像低于另一个）？

Answer 1

一种方法：

#MenuDiv {
    position: absolute;
    top: 50px;
    left: 30px;
    width: 100px;
}

#MenuDiv > div {
   display: table;
   margin-bottom: 10px;
}

#MenuDiv img {
    display: table-cell; 
    vertical-align:middle;
    margin-right: 5px;
}

#MenuDiv div span {
    display: table-cell; 
    vertical-align:middle;
}

Answer 2

我喜欢Mia Sno的答案，但我只是提供选择..

＆＃13;

#MenuDiv {
    position: absolute;
    top: 50px;
    left: 30px;
    width: 100px;
}

#MenuDiv.FixedPosition {
    position: fixed;
    top: 0px;
    left: 30px;
    width: 100px;
}

#MenuDiv>div>img, #MenuDiv>div>span {
  display:inline-block;
  vertical-align:top;
  }

#MenuDiv>div>img {
  width:24px;
  height:24px;
  }

#MenuDiv>div>span {
  width:70px; /*Allow for 4px white space*/
  }

＆＃13;

<div id="MenuDiv">
    <div id="menuItem1">
        <image  src="http://placehold.it/24x24" />
        <span>This is a long menu text for testing</span>
    </div>
    <div id="menuItem2" >
        <image   src="http://placehold.it/24x24" />
        <span>Short text</span>
    </div>    
    <div id="menuItem3" >
        <image   src="http://placehold.it/24x24" />
        <span>This is a long menu text for testing</span>
    </div>        
</div>

＆＃13;

Answer 3

我添加了white-space: nowrap;这会将你的文字放在一行。

#MenuDiv {
    position: absolute;
    top: 50px;
    left: 30px;
    width: 100px;
}

#MenuDiv.FixedPosition {
    position: fixed;
    top: 0px;
    left: 30px;
    width: 100px;
}

#MenuDiv>div>img, #MenuDiv>div>span {
  display:inline-block;
  vertical-align:top;
  }

#MenuDiv>div>img {
  width:24px;
  height:24px;
  }

#MenuDiv>div>span {
  width: 70px;
  white-space: nowrap;
}

<div id="MenuDiv">
    <div id="menuItem1">
        <image  src="http://placehold.it/24x24" />
        <span>This is a long menu text for testing</span>
    </div>
    <div id="menuItem2" >
        <image   src="http://placehold.it/24x24" />
        <span>Short text</span>
    </div>    
    <div id="menuItem3" >
        <image   src="http://placehold.it/24x24" />
        <span>This is a long menu text for testing</span>
    </div>        
</div>

阻止文本环绕多个图像

3 个答案: