小编Syl*_*lin的帖子

我对整个面向对象的范例都很陌生.

我试图在某个游戏中模拟角色,你有不同的等级,类和许多设备选择等.

我最终的目标是创造一种某种类型的"梳妆台",让玩家可以打开网站,尝试一些装备,看看它如何影响他们的参数,花费多少等等.

我已经有了编程的主要部分(这里),但这是我用html,css和javascript进行的第一部作品,而且现在只是一大堆.我想这次开始正常:)

假设我有一个我们将要模拟的角色的对象:

var Lord = function(){

    this.Level =       1;
    this.Gender =      'Male';
    this.Faction =     'Knight';

    this.Attack =      0;
    this.Defense =     1;
    this.SpellPower =  0;
    this.Knowledge =   0;
    this.Luck =        0;
    this.Morale =      1;
    this.Initiative =  0;

    this.addParameter = function(Parameter, amount){
        this[Parameter] += amount;
    };
    this.changeLevelTo = function(Level){
        this.Level = Level;
    };
    this.changeGenderTo = function(Gender){
        this.Gender = Gender;
    };
    this.changeFactionTo = function(Faction){
        this.Faction = Faction;
        //adjust default stats based on new faction
    };
};

我的问题是这样的:一个骑士开始时有1个防御和1个士气,不同的派系会给你不同的统计提升.无法重新分配这些值.在练级时,玩家还可以获得一些在不同参数上花费的统计点,这些可以重新分配.

此外,玩家可以装备一些提供统计提升的设备,并且这些设备也不能重新分配(仅通过不加分配). …

提示
假设我们想在灵活宽度的div内分配一行内联块元素,我们认为第一个和最后一个元素远端的空间是重要的,应该是间距的一部分.

加价

<div id="whole-thing">
<!-- inline-block element, width shrinks to widest row -->

    <div id="row1" class="row">
    <!-- block element (100% width) -->

        <div id="box1" class="box">
        <div id="box2" class="box">
        ..
    </div>
    <div id="row2" class="row">
        ..
    </div>
    ..
</div>

图片
就是这样的东西

进入这个:

在这种情况下,整个东西的宽度缩小到第二行(最宽),因此该行上的任何框之间没有间距.
但每个方框中的内容可能会有所不同,如有必要,间距应相应调整:

尝试

1. justify-content: space-between (或其他造型/解决方案达到同样的效果):
   是不是我们想要的.

2. justify-content: space-around应该是它除了它分配空间的事实with half-size spaces on either end,这再次,不是我们想要的,但几乎..
   比较:
   
   

3. js hack.嗯,它有效,但我仍然希望有一个干净的方法去实现它.

4. 在每行div的开头和结尾添加一个空div然后使用space-between.
   也有效,这就是我如何得到解决方案的上述图片.但后来我最终得到了一堆空div.

我应该使用表格布局(在css中,而不是在标记中)？如果是这样,怎么样？

这让我哭泣.我会感谢任何有助于实现清洁解决方案的帮助.

这是一个小提琴的链接

解

小提琴

放置content:'' ::before和::after行(这些伪元素是所选择的直接子元素)有效地实现了上面的第4个点(space-between两端的+空元素),没有多余的标记.