创建左侧固定图像、右侧按钮、中央或中间文本的布局
P粉681400307
P粉681400307 2023-09-04 21:02:34
[CSS3讨论组]
<p>我正在制作一个食品订单布局,其中左侧包含图像,中间包含文本,右侧用于添加按钮。</p> <p>图像固定在左侧,但按钮根据中间文本长度移动。所以我想修复这个布局:</p> <p>按钮也将固定在右侧,与左侧图像相同,并且不依赖于中间测试长度。</p> <p>如果文本较长,则文本将移至下一行。</p> <p><strong>Foodlist.js</strong></p> <pre class="brush:php;toolbar:false;">import React from &quot;react&quot;; import &quot;./Foodlist.css&quot;; import { useStateValue } from &quot;../../StateProvider&quot;; function Foodlist({ id, title, rating, image, price, info, stock, nostock }) { const [{ basket }, dispatch] = useStateValue(); // console.log(&quot;This is the basket &gt;&gt;&gt;&quot;, basket); const addToBasket = () =&gt; { // dispatch the item into the data layer dispatch({ type: &quot;ADD_TO_BASKET&quot;, item: { id: id, title: title, info: info, image: image, price: price, stock: stock, nostock: nostock, rating: rating, }, }); }; return ( &lt;div className=&quot;food&quot;&gt; &lt;div className=&quot;food__details&quot;&gt; &lt;img src={image} alt=&quot;&quot; /&gt; {/* &lt;button onClick={addToBasket} style={{fontWeight: &quot;bold&quot;}}&gt; &lt;strong style={{fontSize: 20}}&gt;+ &lt;/strong&gt; Add &lt;/button&gt; */} &lt;/div&gt; &lt;div className=&quot;food__title&quot;&gt; &lt;div className=&quot;food__info__layout&quot;&gt; &lt;p style={{fontWeight: &quot;bold&quot;}}&gt;{title}&lt;/p&gt; &lt;p className=&quot;food__info&quot;&gt; &lt;small&gt;₹ &lt;/small&gt; &lt;strong style={{fontSize: 14 ,fontWeight: 100}}&gt;{price}&lt;/strong&gt; &lt;/p&gt; &lt;/div&gt; &lt;button onClick={addToBasket} style={{fontWeight: &quot;bold&quot;}}&gt; &lt;strong style={{fontSize: 20}}&gt;+ &lt;/strong&gt; Add &lt;/button&gt; &lt;/div&gt; &lt;/div&gt; ); } export default Foodlist</pre> <p><strong>Foodlist.css</strong></p> <pre class="brush:php;toolbar:false;">.food { display: flex; flex-direction: row; background-color: transparent; align-items: center; margin: 5px; } .food__details{ display: flex; flex-direction: row; } .food__details &gt; img { max-height: 100px; width: 120px; object-fit: contain; margin-right: 10px; border: 1px solid gold; border-radius: 10px; overflow: hidden; } /* .food__details &gt; button { background: gold; border: none; cursor: pointer; border-radius: 5px; height: fit-content; width: fit-content; } */ .food__info__layout { display: flex; flex-direction: column; } .food__info { display: flex; flex-direction: row; height: auto; /* margin-bottom: 5px; */ } .food__title { display: flex; flex-direction: row; } .food__title &gt; button { background: gold; border: none; cursor: pointer; border-radius: 5px; height: fit-content; width: fit-content; margin-left: 15px; }</pre></p>
P粉681400307
P粉681400307

全部回复(1)
P粉593118425

为了使图像位于左侧,按钮位于右侧,无论中间文本的长度如何,您可以在网格上设置 grid-template-columns: auto 1fr auto包含它们作为直接子代的包装器。

在下面找到您想要的简化版本。请注意,我简化了 HTML 结构。如果您复制过去,请不要忘记将 React 的 class 更改为 className

.food {
  display: grid; 
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  background-color: lightgrey;
}

.food > img {
  max-height: 100px;
  width: 120px;
  object-fit: cover;
  border: 1px solid gold;
  border-radius: 10px;
}

.food .food__title {
  margin-top: 0;
}

.food .food__button {
  background: gold; border: none; cursor: pointer;
  border-radius: 5px; font-weight: bold;
  padding: 0.5rem;
}
<div class="food">
  <img
    class="food__image"
    src="https://images.unsplash.com/photo-1661956602116-aa6865609028?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
    alt=""
  />

  <div class="food__desc">
    <h2 class="food__title">Lorem Ipsum is simply dummy text of the printing</h2>
    <p class="food__info">
      <small>₹ </small>
      <strong>12</strong>
    </p>
  </div>

  <button class="food__button">
    <strong>+ </strong>
    Add
  </button>
</div>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号