Question

我在我的网站上设置了一系列产品，其中的图片和说明位于<span>标记内，如下所示。

然而，无论段落的长度如何，我都希望它们都是统一的大小。

我可以为它设置一个高度，但是那些较小的那些都将有一个巨大的差距，我不想要因为我有不同的类别设置，其中一些有很长或很短的描述。

如果我可以根据屏幕上最长的时间来设置高度，那将是很好的，因为至少同一类别中的那些应该足够接近相同的长度以至于它赢得了相同的长度。差别太大

＆＃13;

span{
  border:1px solid black;
  width:110px;
  text-align:center;
  display:inline-block;
  vertical-align:top;
}
p{
  width:90%;
  margin-left:auto;
  margin-right:auto;
}

＆＃13;

<span>
<img src="http://via.placeholder.com/100x100">
<p>some text</p>
</span>
<span>
<img src="http://via.placeholder.com/100x100">
<p>a really really really really really really really really really really long bit of text</p>
</span>
<span>
<img src="http://via.placeholder.com/100x100">
<p>some text</p>
</span>

＆＃13;

对此有任何帮助或建议将不胜感激。

Answer 1

Flexbox会自动为您处理！将您的所有span放入设置为display: flex的容器中：

＆＃13;

span{
  border:1px solid black;
  width:110px;
  text-align:center;
  display:inline-block;
  vertical-align:top;
  margin-right: 5px;
  margin-bottom: 5px;
}
p{
  width:90%;
  margin-left:auto;
  margin-right:auto;
}
.container {
  display: flex;
  flex-wrap: wrap;
}

＆＃13;

<div class="container">
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>a really really really really really really really really really really long bit of text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
    <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>a really really really really really really really really really really long bit of text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
    <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>a really really really really really really really really really really long bit of text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
    <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>a really really really really really really really really really really long bit of text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
    <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>a really really really really really really really really really really long bit of text</p>
  </span>
  <span>
    <img src="http://via.placeholder.com/100x100">
    <p>some text</p>
  </span>
</div>

＆＃13;

Answer 2

我提供了一个简单的脚本来确定图像的最大高度。然后我将此高度设置为所有其他元素。这是代码：

＆＃13;

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestDetailsComponent } from './test-details.component';

declare const videojs: any;

fdescribe('TestDetailsComponent', () => {
  let component: TestDetailsComponent;
  let fixture: ComponentFixture<TestDetailsComponent>;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        imports: [],
        declarations: [ TestDetailsComponent ],
        schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
        providers: [
           { provide: videojs, useValue: {} }
        ]
      }).compileComponents();
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(TestDetailsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(true).toBeTruthy(true);
  });
});

＆＃13;

// array of all elements
const elements = [...document.querySelectorAll('span')];

// determine the maximum of all heights
const heights = elements.map((e) => e.offsetHeight);
const maxHeight = Math.max(...heights);

// set the all heights to the maximum value
elements.forEach((e) => e.style.height = `${maxHeight}px`);

＆＃13;

span {
  border: 1px solid black;
  width: 110px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

p {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

Answer 3

这是柔性盒的理想用例。

有几个很棒的资源

以下是您可以适应您需求的基本想法：

＆＃13;

.items{
  display:flex;
}
.item{
 border: 1px dashed #f00;
 flex:1;
}

＆＃13;

<div class="items">
  <div class="item">Lorem ipsum dolor sit amet</div>
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae orci dui. Donec urna erat, blandit vitae placerat id, efficitur et libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra</div>
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae orci dui. Donec urna erat, blandit vitae placerat id, <div>
</div>

＆＃13;

Answer 4

我使用了Bootstrap v4 row和col类。

每当您运行代码段以查看结果时，请按Full Page。

示例：

＆＃13;

span {
  border: 1px solid black;
  width: 110px;
  height: 100%;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

p {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
  
    <div class="col-md-2">
      <span>
        <img src="http://via.placeholder.com/100x100">
        <p>some text</p>
      </span>
    </div>
    
    <div class="col-md-2">
      <span>
        <img src="http://via.placeholder.com/100x100">
        <p>a really really really really really really really really really really long bit of text</p>
      </span>
    </div>
    
    <div class="col-md-2">
      <span>
        <img src="http://via.placeholder.com/100x100">
        <p>some text</p>
      </span>
    </div>
    
    <div class="col-md-2">
      <span>
        <img src="http://via.placeholder.com/100x100">
        <p>some text</p>
      </span>
    </div>
    
    <div class="col-md-2">
      <span>
        <img src="http://via.placeholder.com/100x100">
        <p>a really really really really really really really really really really long bit of text</p>
      </span>
    </div>
    
    <div class="col-md-2">
      <span>
        <img src="http://via.placeholder.com/100x100">
        <p>some text</p>
      </span>
    </div>
    
  </div>
</div>

＆＃13;

＆＃13; 使用Bootstrap基本上会自动为您执行此操作，我在CSS标记中添加了height: 100%;所做的一切。

CSS将类似的项目设置为与屏幕

4 个答案: