CSS是否有办法确定和调整图像宽度？

感谢我的上一个问题，我能够让我的图标向左，文本向右浮动div示例工作：

资料来源：

然而，由于图像的宽度不同，我不得不在一些标签中加入内嵌样式来进行一些欺骗

如何更改此代码以便：

没有内嵌样式 它支持各种大小的图像宽度 代码：

---

解决问题的最佳方法可能是使用JavaScript动态修改CSS。允许您执行诸如获取图像宽度之类的操作，并可用于修改元素的CSS，包括宽度、边距和填充。我的建议是为每个itemIcon和itemBody添加一个ID，然后使用适当的样式设置div

解决问题的最佳方法可能是使用JavaScript动态修改CSS。允许您执行诸如获取图像宽度之类的操作，并可用于修改元素的CSS，包括宽度、边距和填充。我的建议是为每个itemIcon和itemBody添加一个ID，然后使用适当的样式设置div

我希望有人能给你一个基于div/css的解决方案。但为了处理不同的图像宽度，我认为您将需要以下四件事情之一：

像现在一样手动创建内联样式 在服务器端代码中创建的内联样式 使用javascript调整文本块的宽度 每个图像和文本块的单行表

---

也许这只是我想象的一个失败，但我不认为这种布局可以在不设置特定段落宽度的情况下完成，也不为每个块使用一个单行表。

我希望有人能给你一个基于div/css的解决方案。但为了处理不同的图像宽度，我认为您将需要以下四件事情之一：

像现在一样手动创建内联样式 在服务器端代码中创建的内联样式 使用javascript调整文本块的宽度 每个图像和文本块的单行表

---

也许这只是我想象的一个失败，但我不认为这种布局可以在不设置特定段落宽度的情况下完成，也不需要为每个块使用一个单行表。

如果将overflow:auto添加到.itemBody，则可以删除这些自定义的内联页边距和填充：

但是，您无法像这样去掉.itemcon上的内联宽度，因为CSS中没有办法将的宽度限制为它前面的图像的宽度。如果您只有一个图像，但没有文本，则不需要宽度

但是，如果使用CSS表，则可以完全取消内联样式：

.itemIcon {
    display: table-cell;
    padding-right: 10px;
}
.itemBody {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}

---

itemBody上的宽度：100%强制itemIcon的宽度降低到其最小宽度，该宽度由图像的宽度决定。垂直对齐：顶部将阻止itemBody的第一行与itemIcon表格列中的图像/文本对齐。

如果将溢出：自动添加到.itemBody，则可以删除这些自定义内联边距和填充

但是，您无法像这样去掉.itemcon上的内联宽度，因为CSS中没有办法将的宽度限制为它前面的图像的宽度。如果您只有一个图像，但没有文本，则不需要宽度

但是，如果使用CSS表，则可以完全取消内联样式：

.itemIcon {
    display: table-cell;
    padding-right: 10px;
}
.itemBody {
    display: table-cell;
    vertical-align: top;
    width: 100%;
}

---

itemBody上的宽度：100%强制itemIcon的宽度降低到其最小宽度，该宽度由图像的宽度决定。垂直对齐：顶部将阻止itemBody的第一行与itemIcon表列中的图像/文本对齐。

据我所知，CSS不提供任何条件运算符或基于逻辑的操作方法。这意味着您的选择有限，无法：

服务器端映像调整 客户端图像或样式调整 使用css对图像应用一致的宽度 在所有这些中，我将讨论第三点，它提供了几个选项

首先是使用：

img{width:100px；/*或任何*/}

第二个仅限于处理绝对定位的图像：

---

据我所知，img{clip:rect0 100 100 100；}/*将获取原始图像并将其剪裁到指定的维度顶部、右侧、底部、左侧*/

CSS没有提供任何用于条件运算符或基于逻辑的操作的方法。这意味着您的选择有限，无法：

服务器端映像调整 客户端图像或样式调整 使用css对图像应用一致的宽度 在所有这些中，我将讨论第三点，它提供了几个选项

首先是使用：

img{width:100px；/*或任何*/}

第二个仅限于处理绝对定位的图像：

img{c

---

lip:rect0 100 100；}/*它将获取原始图像并将其剪裁到指定的尺寸顶部、右侧、底部、左侧*/

OMG表格：。我想这张桌子很适合解决这类问题

<div class="item"> 
    <table>
    <tr>
    <td class="image">
    <div class="itemIcon" >
      <img src="icon.png" alt=""/> 
      <p>This is the caption that is under the image.</p>  
    </div>
    </td>
    <td>
    <div class="itemBody" >    
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    </td>
    </tr>
    </table>
  </div>

td.image {
     vertical-align:top;
    }

---

天哪，大家都忘了表：。我想这张桌子很适合解决这类问题

<div class="item"> 
    <table>
    <tr>
    <td class="image">
    <div class="itemIcon" >
      <img src="icon.png" alt=""/> 
      <p>This is the caption that is under the image.</p>  
    </div>
    </td>
    <td>
    <div class="itemBody" >    
      <h1>This is the first item</h1>
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
      <p>Aliquid aliquam fabulas duo an, eu delenit intellegebat has, in sit commodo aliquip. Inermis neglegentur vis an, ea mei habeo animal verterem. Cum vivendo intellegam disputando id, usu id dicta harum convenire. Cibo corpora ut pri, sed legere probatus aliquyam no, vidisse suscipiantur eu mea. Modus etiam concludaturque pro an, ut latine quaeque per. Harum ignota mnesarchum pri ad, duo et diam oblique epicurei, pri ne vivendo omnesque epicurei.</p> 
    </div> 
    </td>
    </tr>
    </table>
  </div>

td.image {
     vertical-align:top;
    }

---

内联样式很容易处理。在.item中添加一个类，比如.big，然后使用HTML

<div class="item big">

---

单独使用CSS无法动态更改数字。您可以使用javascript或服务器端函数插入类名等。如果您正在自动生成图像，您将同时处理此问题。如果您是手工操作，只需添加一次类就可以让操作变得简单。

内联样式很容易处理。在.item中添加一个类，比如.big，然后使用HTML

<div class="item big">

---

单独使用CSS无法动态更改数字。您可以使用javascript或服务器端函数插入类名等。如果您正在自动生成图像，您将同时处理此问题。如果您是手工操作，只需添加一次类就可以轻松很多。

为什么不在CSS上强制设置图像大小？为什么不在CSS上强制设置图像大小？