小编Nic*_*lov的帖子

布局divs使用包装或仅使用CSS并排

我正在开发一个控件,旨在显示日历网格上的活动块.它是一个简单的JavaScript/CSS,依赖于jQuery进行DOM操作等.这是一张图片:

日历控件需要适当的布局

有A和B带,每个带包含几个活动块([1,2],[3,4]).活动可以重叠或相继跟随.我的目标是相应地放置活动块:如果活动重叠如[1,2],我希望它们像图中那样包裹并且彼此叠加; 如果它们像[3,4]那样顺序,我希望它们并排,不像图中所示.

另外,我希望乐队的(A,B)高度自动调整.因此,具有重叠活动块的带将具有带有连续块的带的高度的两倍.

在这一点上,我可以得到一个或另一个.

如果活动块具有display: block;,则无论它们是否实际重叠,活动都会换行(3,4).乐队的高度确实相应调整.

如果活动块有display: inline-block;,活动共享相同的高度,因此一个被另一个隐藏(1,2).乐队的高度保持一个活动块.

一切都是div,这是相关的HTML/CSS:

<div class="band">
  <div class="activity-block" style="left: 331.429px; width: 11.4286px;"></div>
  <div class="activity-block" style="left: 160px; width: 297.143px;"></div>
</div>
<div class="band">
  <div class="activity-block" style="left: 205.714px; width: 22.8571px;"></div>
  <div class="activity-block" style="left: 365.714px; width: 3417.14px;"></div>
</div>
<div class="band"></div>
Run Code Online (Sandbox Code Playgroud)

乐队(A,B):

.band {
  min-height: 20px;
}
Run Code Online (Sandbox Code Playgroud)

活动块(1,2,3,4):

.activity-block {
  background-color: #66C6C2;
  border-radius: 3px;
  display: block;
  height: 20px;
  margin-bottom: 5px;
  margin-top: 5px;
  position: relative;
}
Run Code Online (Sandbox Code Playgroud)

left以及width从JavaScript设置活动块.

我想只使用两个CSS类,一个用于乐队,一个用于活动块.我意识到可以使用JavaScript实现目标,但我想知道这是否只能通过CSS实现.

css

11
推荐指数
1
解决办法
633
查看次数

如何验证关联模型?

这是我第一次构建自定义验证,因为尝试常规 ORM 验证不起作用。我有一个名为 AdGroup 的模型,它属于另一个名为 Car 的模型。我想阻止用户在未选择汽车的情况下创建新的广告组。汽车也是一个文件。

class AdGroup < ActiveRecord::Base
  belongs_to :car
  validate :validate_car_id

  def validate_car_id
    car = Car.find_by(id: params[:id])
    if car.nil?
      errors.add(:car, "Select a car image")
    end
  end
end

class Car < ActiveRecord::Base
  validates :make, :model, :year, presence: true                  
  validates :file, presence: true
  belongs_to :make
  has_many :ad_groups

  ...
end
Run Code Online (Sandbox Code Playgroud)

是我试图选择的图像。

ruby-on-rails

2
推荐指数
1
解决办法
5290
查看次数

标签 统计

css ×1

ruby-on-rails ×1