Question

我正在尝试创建一个事件列表，该事件列表的左侧是图像，右侧是用于描述事件列表（类似于Evenbrite）。但是，我遇到以下问题：

为文本创建一个框
将图像与框对齐
更改文本的边距和边距，以使其适合框内。

谢谢！

html：

body {
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 0;
    margin: 0;
}
h1 {
    color: rgb(65, 56, 50);
    font-size: 6em;
    padding: 0px;
}
h2 {
    color: rgb(61, 23, 30);
    font-size: 3em;
}
img {
    height: 350px;
}
p {
    color: rgb(61, 23, 30);
    padding: 30px;
    font-size: 1.5em;
}

.events {
    float:left;
    height:200px;
    width: 200px;
    margin: 20px;
}
.event_description {
    display:inline-block;
    font-size: 1.0em;
    float:right;
    margin: auto;
    padding: 0px;
    border:5px lightgray;
}

css：

int i, j;
int[][] hor = new int[i][j];

Answer 1

这是您想要的吗？我已经制作了event_description的宽度

 width: calc(100% - 240px);

这将使描述与图像对齐

工作原理

width: calc(100% - 240px);

240px是图片的宽度与应用于图片的边距之和

您正在从父级宽度中减去240px。

body {
  text-align: center;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding: 0;
  margin: 0;
}

h1 {
  color: rgb(65, 56, 50);
  font-size: 6em;
  padding: 0px;
}

h2 {
  color: rgb(61, 23, 30);
  font-size: 3em;
}

img {
  height: 350px;
}

p {
  color: rgb(61, 23, 30);
  padding: 30px;
  font-size: 1.5em;
}

.events {
  float: left;
  height: 200px;
  width: 200px;
  margin: 20px;
}

.event_description {
  width: calc(100% - 240px);
  display: inline-block;
  font-size: 1.0em;
  float: right;
  margin: auto;
  padding: 0px;
  border: 5px lightgray;
}

<img src="https://placehold.it/100x100" alt="festo bionic" class="events">
<div class="event_description">
  <p> Robotics Demo </p>
  <p> All Day on October 4th, 2018. R:Lab, Emirates Tower</p>
  <p> Join us in interacting with the most technologically advanced robots. </p>
</div>

Answer 2

看看那是你想要的。

我创建了一个元素<div class="content"></div>，它将作为元素的父元素，并设置以下属性：display: flex;。

要设置.events_description的边界solid

.content {
  display: flex;
}

p {
    color: rgb(61, 23, 30);
}

.events {
    height:200px;
    width: 200px;
    margin-right: 30px;
}
.event_description {
  flex-wrap:wrap;

    display:inline-block;
    font-size: 16px;
    padding: 0px 15px 0 0;
    border:5px solid lightgray;
}

p {
  margin: 0;
}

<div class="content">
  <img src="https://www.gettyimages.co.uk/gi-resources/images/Embed/new/embed1.jpg" alt="festo bionic" class="events">
  <div class="event_description">
    <p> Robotics Demo </p>
    <p> All Day on October 4th, 2018. R:Lab, Emirates Tower</p>
    <p> Join us in interacting with the most technologically advanced robots. </p>
  </div>
</div>

图像和文本框彼此对齐

2 个答案: