Question

我正在尝试在Wordpress中编写课程表。我附上了一张模拟图片，以便更好地说明我想要实现的目标。

在这下面模拟：

文本div保持在拇指div下或包裹它并且我的列丢失。

此外，当进入响应模式时，div不会彼此对齐，而是将一个堆叠在另一个之上。我试图让拇指图像旁边有一列文字，就像在图片中一样，让它可以很好地缩放到小屏幕上。

有关如何实现这一目标的任何想法？它甚至可能吗？非常感谢你提前。

以下是代码：

#text {
width: 33%;
align: left;
clear: both;
}

#thumb {
width: 33%;
align: left;
}

<div id ="thumb"><img src=“---" /></div>
<div id=“text”>NAME OF FIRST CLASS
</div>

Answer 1

最后更新于2016年7月12日

除此之外，您还需要向目标移动设备添加媒体查询。

在少于320像素的屏幕中查看网站时。 #text和#thumb 浮动属性设置为无，宽度从 33％增加到 100％。为了增加两个元素（#text，#thumb）之间的间距，我们将 10px 的 margin-bottom 添加到#thumb < / p>

@media all and (max-width:320px){
  #text{ float:none; width:100%; }
  #thumb { float:none; width:100%;margin-bottom:10px; }
}

Demo

<强> 更新

你缺少一些东西。为了左对齐元素，您需要使用 float ，因为没有名称为对齐的css属性。

由于我们是浮动元素，我们需要确保将这两个div（.thumb，.text）包含在另一个div（.post或其他类）中并添加'。 clearfix'类到它。

'。clearfix'与clear:both css属性
的作用相同
<div class="post clearfix"> <div id ="thumb"> <img src=“---" /> </div> <div id=“text”> NAME OF FIRST CLASS The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. Aug 1 - 2, 9AM - 5PM Salt Lake City, UT </div> </div>

<强> CSS

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} .clearfix{display:inline-block;clear:both;} * html .clearfix{height:1%;} .clearfix{display:block;} .post { width:100%; } #text { width: 33%; float: left;} #thumb { width: 33%; float: left; }

如果您可以向我们展示代码，那么这将有助于我们减少解决问题的时间。

根据您提供的详细信息。如果您没有将.clearfix类添加到父div
，则可能会发生这种情况
<强> HTML

<div class="parent-div clearfix"> <div class="image"> </div> <div class="text"> </div> </div>

<强> CSS

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} .clearfix{display:inline-block;clear:both;} * html .clearfix{height:1%;} .clearfix{display:block;}

希望有所帮助

Answer 2

如果您认为大多数用户是Win10或任何其他非Windows操作系统*（source），我强烈建议您使用Flexbox。 Chris Coyier对于如何使用Flexbox模块的CSS技巧有很好的article，你应该完全检查它！

基本上，每个类的HTML可能都是这样的结构：

<article class="class">
  <img alt="" class="class__image" src="" />
  <div class="class__info">
    <h2 class="class__title">Title</h2>
    <p class="class__description">Description</p>
    <div class="schedule class__schedule">
      <h3 class="schedule__title">Dates</h3>
      <div class="event schedule__event">
        <div class="event__info">
          <p class="event__date-time">Date, Time</p>
          <p class="event__location">Location</p>
        </div>
        <div class="event__action">
          <button class="event__register">Register</button>
        </div>
      </div>
      ...

所以你的新CSS看起来像这样：

.class {
  display: flex;       /* 1 */
}
.class__image {
  width: 20%;
}
.class__info {
  flex-grow: 1;        /* 2 */
}
.schedule__event {
  align-items: center; /* 3 */
  display: flex;
}
.event__info {
  flex-grow: 1;
}
.event__action {
  width: 45%;
}

这告诉浏览器我们将在此元素中使用Flexbox
这基本上说＆＃34;占用所有剩余空间＆＃34;，意味着将来你可以改变图像宽度而不需要做任何数学计算来得出信息的最终尺寸
这使您的“注册”按钮在文本中间垂直对齐

我对您希望在较小的屏幕尺寸下发生的事情感到有些困惑，但Flexbox默认不会包装。如果您想更改它，请在CSS中添加以下内容：

@media all and (max-width: 600px) {
  .class,
  .schedule__event {
    flex-direction: column;  /* 4 */
    justify-content: center; /* 5 */
  }

这会改变子元素从水平从左到右显示的方向从上到下垂直
这会将子元素对齐为水平居中

那就应该在页面布局方面做到这一点！

*如果您愿意，可以找到Flexbox polyfill来获取某些旧版IE的功能：）

将图片与文字列对齐，同时保持其响应

2 个答案: