请问各位大虾们：在latex中如何将三张图片并排在一行，而不是一列？

Posted 2023-04-18

还需要在每个图片下面 附上标题 那该怎么做呢？

方法很多啊，比如用表格，minipage，也可以直接用includegraphics放:
\beginfigure[H]\centering
\includegraphics[width=.25\textwidth]fig1.jpg
\includegraphics[width=.25\textwidth]fig3.jpg
\includegraphics[width=.25\textwidth]fig2.jpg
\endfigure追问

minipage 这个怎么用呢？

追答

代码如下。要注意minipage环境可能会插入额外的空白，并且它的[t]/[b]选项不能写错，否则图片没法对齐。

如果要得到更复杂的效果，可以用subfig宏包。

\\documentclassarticle

\\begindocument 

\\beginfigure

  \\centering

  \\beginminipage[t].25\\linewidth

    \\framebox

      framed text

  \\captiona figure

  \\endminipage

  \\beginminipage[t].25\\linewidth

    \\framebox

      framed text

  \\captiona figure

  \\endminipage

  \\beginminipage[t].25\\linewidth

    \\framebox

      framed text

  \\captiona figure

  \\endminipage

\\endfigure

 

\\enddocument

参考技术A 方法很多啊，比如用表格，minipage，也可以直接用includegraphics放: \beginfigure[H]\centering \includegraphics[width=.25\textwidth]fig1.jpg \includegraphics[width=.25\textwidth]fig3.jpg \includegraphics[width=.25\textwidth]

如何使用 CSS 和 HTML 将三张卡片对齐在一行中？

【中文标题】如何使用 CSS 和 HTML 将三张卡片对齐在一行中？

【英文标题】：How to align three cards to center in a row using CCS and HTML?

【发布时间】：2021-03-15 16:16:51

【问题描述】：

我正在建立一个网站，但遇到了问题。当我试图将三张卡片排成一行时，它们停留在左侧。

HTML 代码：

    <div class="row">
    <div class="column">
      <div class="card">
        <h3 class="card-title">Ramndom1</h3>
        <p class="card-text">hfejhgfjhejhfvhjhefgvfjhefvfvevjhfvfvejhvfvjhf</p>
      </div>
    </div>
  
    <div class="column">
      <div class="card">
        <h3 class="card-title">Random2</h3>
        <p class="card-text">fheguighefgheghhjfggfefgghf</p>
      </div>
    </div>
    
    <div class="column">
      <div class="card">
        <h3 class="card-title">Random3</h3>
        <p class="card-text">fhekfhejkfjhegfghfjhegbfjhfjhefgfehf</p>
      </div>
    </div>
  </div>

CSS 代码：

  .column 
  width: 33%;
  padding: 0 15px;


.row 
  display: flex;
  align-items: center;
  justify-content: center;


.row:after 
  content: "";
  display: table;
  clear: both;


@media screen and (max-width: 600px) 
  .column 
    width: 100%;
    display: block;
    margin-bottom: 20px;
  

.card 
  width: 450px;
  height: 450px;
  background: #8fb1ff 0% 0% no-repeat padding-box;
  border-radius: 20px;
  opacity: 1;

.card-title 
  text-align: center;
  font: normal normal bold 63px/84px Segoe UI;
  letter-spacing: 0px;
  color: #4a4949;
  opacity: 1;

.card-text 
  text-align: center;
  font: normal normal bold 24px/32px Segoe UI;
  letter-spacing: 0px;
  color: #4a4949;
  opacity: 1;
  padding: 5px;

我无法使用此代码对齐它。可能是什么问题？ 我尝试使用 justify-content，但它没有用。我不知道我还能做什么。 你能帮我解决这个问题吗？

【问题讨论】：

哪个中心？垂直中心？还是只是水平中心？如果 css-grid 还允许通过媒体查询更轻松地切换到汉堡布局，那么为什么这么复杂。

【参考方案1】：

添加这个：

margin-left: auto;
margin-right: auto;

到您的 CSS 中的.card。

【参考方案2】：

您是否正在寻找类似的东西

.column 
  width: calc(33% - 30px);
  padding: 0 15px;


.row 
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;


.row:after 
  content: "";
  display: table;
  clear: both;


@media screen and (max-width: 600px) 
  .column 
    width: 100%;
    display: block;
    margin-bottom: 20px;
  

.card 
  background: #8fb1ff 0% 0% no-repeat padding-box;
  border-radius: 20px;
  opacity: 1;
  overflow: hidden;

.card-title 
  text-align: center;
  font: normal normal bold 63px/84px Segoe UI;
  letter-spacing: 0px;
  color: #4a4949;
  opacity: 1;

.card-text 
  text-align: center;
  font: normal normal bold 24px/32px Segoe UI;
  letter-spacing: 0px;
  color: #4a4949;
  opacity: 1;
  padding: 5px;

 <div class="row">
    <div class="column">
      <div class="card">
        <h3 class="card-title">Ramndom1</h3>
        <p class="card-text">hfejhgfjhejhfvhjhefgvfjhefvfvevjhfvfvejhvfvjhf</p>
      </div>
    </div>
  
    <div class="column">
      <div class="card">
        <h3 class="card-title">Random2</h3>
        <p class="card-text">fheguighefgheghhjfggfefgghf</p>
      </div>
    </div>
    
    <div class="column">
      <div class="card">
        <h3 class="card-title">Random3</h3>
        <p class="card-text">fhekfhejkfjhegfghfjhegbfjhfjhefgfehf</p>
      </div>
    </div>
  </div>